Merge pull request #1593 from pateljannat/programming-exercises

feat: programming exercises
2025-06-26 13:05:22 +05:30
parent 1e9beedc77 b8981c249f
commit d60a7e8c94
55 changed files with 2728 additions and 70 deletions
--- a/.github/helper/install_dependencies.sh
+++ b/.github/helper/install_dependencies.sh
@@ -5,7 +5,7 @@ echo "Setting Up System Dependencies..."

 sudo apt update
 sudo apt remove mysql-server mysql-client
-sudo apt-get install libcups2-dev redis-server mariadb-client
+sudo apt-get install libcups2-dev redis-server mariadb-client libmariadb-dev

 install_wkhtmltopdf() {
  wget -q https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.focal_amd64.deb
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -32,6 +32,8 @@ declare module 'vue' {
    Categories: typeof import('./src/components/Settings/Categories.vue')['default']
    CertificationLinks: typeof import('./src/components/CertificationLinks.vue')['default']
    ChapterModal: typeof import('./src/components/Modals/ChapterModal.vue')['default']
+    ChildTable: typeof import('./src/components/Controls/ChildTable.vue')['default']
+    Code: typeof import('./src/components/Controls/Code.vue')['default']
    CodeEditor: typeof import('./src/components/Controls/CodeEditor.vue')['default']
    CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
    CourseCard: typeof import('./src/components/CourseCard.vue')['default']
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,10 @@
    "copy-html-entry": "cp ../lms/public/frontend/index.html ../lms/www/lms.html"
  },
  "dependencies": {
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-python": "^6.2.1",
    "@editorjs/checklist": "^1.6.0",
    "@editorjs/code": "^2.9.0",
    "@editorjs/editorjs": "^2.29.0",
@@ -24,7 +28,7 @@
    "ace-builds": "^1.36.2",
    "apexcharts": "^4.3.0",
    "chart.js": "^4.4.1",
-    "codemirror-editor-vue3": "^2.8.0",
+    "codemirror": "^6.0.1",
    "dayjs": "^1.11.6",
    "feather-icons": "^4.28.0",
    "frappe-ui": "^0.1.147",
@@ -35,9 +39,11 @@
    "plyr": "^3.7.8",
    "socket.io-client": "^4.7.2",
    "tailwindcss": "3.4.15",
+    "thememirror": "^2.0.1",
    "typescript": "^5.7.2",
    "vue": "^3.4.23",
    "vue-chartjs": "^5.3.0",
+    "vue-codemirror": "^6.1.1",
    "vue-draggable-next": "^2.2.1",
    "vue-router": "^4.0.12",
    "vue3-apexcharts": "^1.8.0",
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -313,7 +313,7 @@ const addNotifications = () => {

 const addQuizzes = () => {
 	if (isInstructor.value || isModerator.value) {
-		sidebarLinks.value.push({
+		sidebarLinks.value.splice(4, 0, {
 			label: 'Quizzes',
 			icon: 'CircleHelp',
 			to: 'Quizzes',
@@ -329,7 +329,7 @@ const addQuizzes = () => {

 const addAssignments = () => {
 	if (isInstructor.value || isModerator.value) {
-		sidebarLinks.value.push({
+		sidebarLinks.value.splice(5, 0, {
 			label: 'Assignments',
 			icon: 'Pencil',
 			to: 'Assignments',
--- a/frontend/src/components/AssessmentPlugin.vue
+++ b/frontend/src/components/AssessmentPlugin.vue
@@ -2,17 +2,24 @@
 	<Dialog
 		v-model="show"
 		:options="{
+			title:
+				type == 'quiz'
+					? __('Add a quiz to your lesson')
+					: __('Add an assignment to your lesson'),
 			size: 'xl',
+			actions: [
+				{
+					label: __('Save'),
+					variant: 'solid',
+					onClick: () => {
+						addAssessment()
+					},
+				},
+			],
 		}"
 	>
-		<template #body>
-			<div class="p-5 space-y-4">
-				<div v-if="type == 'quiz'" class="text-lg font-semibold">
-					{{ __('Add a quiz to your lesson') }}
-				</div>
-				<div v-else class="text-lg font-semibold">
-					{{ __('Add an assignment to your lesson') }}
-				</div>
+		<template #body-content>
+			<div class="">
 				<div>
 					<Link
 						v-if="type == 'quiz'"
@@ -29,17 +36,12 @@
 						:onCreate="(value, close) => redirectToForm()"
 					/>
 				</div>
-				<div class="flex justify-end space-x-2">
-					<Button variant="solid" @click="addAssessment()">
-						{{ __('Save') }}
-					</Button>
-				</div>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Button } from 'frappe-ui'
+import { Dialog } from 'frappe-ui'
 import { onMounted, ref, nextTick } from 'vue'
 import Link from '@/components/Controls/Link.vue'

--- a/frontend/src/components/Assessments.vue
+++ b/frontend/src/components/Assessments.vue
@@ -40,7 +40,7 @@
 						<template #default="{ column, item }">
 							<ListRowItem :item="row[column.key]" :align="column.align">
 								<div v-if="column.key == 'assessment_type'">
-									{{ row[column.key] == 'LMS Quiz' ? 'Quiz' : 'Assignment' }}
+									{{ getAssessmentTypeLabel(row[column.key]) }}
 								</div>
 								<div v-else-if="column.key == 'title'">
 									{{ row[column.key] }}
@@ -172,6 +172,24 @@ const getRowRoute = (row) => {
 				},
 			}
 		}
+	} else if (row.assessment_type == 'LMS Programming Exercise') {
+		if (row.submission) {
+			return {
+				name: 'ProgrammingExerciseSubmission',
+				params: {
+					exerciseID: row.assessment_name,
+					submissionID: row.submission.name,
+				},
+			}
+		} else {
+			return {
+				name: 'ProgrammingExerciseSubmission',
+				params: {
+					exerciseID: row.assessment_name,
+					submissionID: 'new',
+				},
+			}
+		}
 	} else {
 		return {
 			name: 'QuizPage',
@@ -213,7 +231,7 @@ const getAssessmentColumns = () => {
 }

 const getStatusTheme = (status) => {
-	if (status === 'Pass') {
+	if (status === 'Pass' || status === 'Passed') {
 		return 'green'
 	} else if (status === 'Not Graded') {
 		return 'orange'
@@ -221,4 +239,14 @@ const getStatusTheme = (status) => {
 		return 'red'
 	}
 }
+
+const getAssessmentTypeLabel = (type) => {
+	if (type == 'LMS Assignment') {
+		return __('Assignment')
+	} else if (type == 'LMS Quiz') {
+		return __('Quiz')
+	} else if (type == 'LMS Programming Exercise') {
+		return __('Programming Exercise')
+	}
+}
 </script>
--- a/frontend/src/components/BatchDashboard.vue
+++ b/frontend/src/components/BatchDashboard.vue
@@ -6,13 +6,12 @@
 			:courses="batch.data.courses"
 		/>
 		<Assessments :batch="batch.data.name" />
-		<StudentHeatmap />
+		<!-- <StudentHeatmap /> -->
 	</div>
 </template>
 <script setup>
 import UpcomingEvaluations from '@/components/UpcomingEvaluations.vue'
 import Assessments from '@/components/Assessments.vue'
-import StudentHeatmap from '@/components/StudentHeatmap.vue'

 const props = defineProps({
 	batch: {
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -8,6 +8,7 @@
 							class="flex w-full items-center justify-between focus:outline-none"
 							:class="inputClasses"
 							@click="() => togglePopover()"
+							:disabled="attrs.readonly"
 						>
 							<div class="flex items-center">
 								<slot name="prefix" />
--- a/frontend/src/components/Controls/ChildTable.vue
+++ b/frontend/src/components/Controls/ChildTable.vue
@@ -0,0 +1,149 @@
+<template>
+	<div>
+		<div class="text-xs text-ink-gray-5 mb-2">
+			{{ label }}
+		</div>
+		<div class="overflow-x-auto border rounded-md">
+			<div
+				class="grid items-center space-x-4 p-2 border-b"
+				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
+			>
+				<div
+					v-for="(column, index) in columns"
+					:key="index"
+					class="text-sm text-ink-gray-5"
+				>
+					{{ column }}
+				</div>
+				<div></div>
+			</div>
+			<div
+				v-for="(row, rowIndex) in rows"
+				:key="rowIndex"
+				class="grid items-center space-x-4 p-2"
+				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
+			>
+				<template v-for="key in Object.keys(row)" :key="key">
+					<input
+						v-if="showKey(key)"
+						v-model="row[key]"
+						class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-sm text-sm focus:outline-none"
+					/>
+				</template>
+
+				<div class="relative" ref="menuRef">
+					<Button
+						variant="ghost"
+						@click="(event: MouseEvent) => toggleMenu(rowIndex, event)"
+					>
+						<template #icon>
+							<Ellipsis
+								class="size-4 text-ink-gray-7 stroke-1.5 cursor-pointer"
+							/>
+						</template>
+					</Button>
+
+					<div
+						v-if="menuOpenIndex === rowIndex"
+						class="absolute right-[30px] top-5 mt-1 w-32 bg-surface-white border border-outline-gray-1 rounded-md shadow-sm"
+					>
+						<button
+							@click="deleteRow(rowIndex)"
+							class="flex items-center space-x-2 w-full text-left px-3 py-2 text-sm text-ink-red-3"
+						>
+							<Trash2 class="size-4 stroke-1.5" />
+							<span>
+								{{ __('Delete') }}
+							</span>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="mt-2">
+			<Button @click="addRow">
+				<template #prefix>
+					<Plus class="size-4 text-ink-gray-7" />
+				</template>
+				{{ __('Add Row') }}
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Button } from 'frappe-ui'
+import { Ellipsis, Plus, Trash2 } from 'lucide-vue-next'
+import { onClickOutside } from '@vueuse/core'
+
+const rows = defineModel<Cell[][]>()
+const menuRef = ref(null)
+const menuOpenIndex = ref<number | null>(null)
+const menuTopPosition = ref<string>('')
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: Cell[][]): void
+}>()
+
+type Cell = {
+	value: string
+	editable?: boolean
+}
+
+const props = withDefaults(
+	defineProps<{
+		modelValue?: Cell[][]
+		columns?: string[]
+		label?: string
+	}>(),
+	{
+		columns: [],
+	}
+)
+
+const columns = ref(props.columns)
+
+watch(rows, () => {
+	if (rows.value?.length < 1) {
+		addRow()
+	}
+})
+
+const addRow = () => {
+	if (!rows.value) {
+		rows.value = []
+	}
+	let newRow: { [key: string]: string } = {}
+	columns.value.forEach((column: any) => {
+		newRow[column.toLowerCase().split(' ').join('_')] = ''
+	})
+	rows.value.push(newRow)
+	emit('update:modelValue', rows.value)
+}
+
+const deleteRow = (index: number) => {
+	rows.value.splice(index, 1)
+	emit('update:modelValue', rows.value)
+}
+
+const getGridTemplateColumns = () => {
+	return [...Array(columns.value.length).fill('1fr'), '0.25fr'].join(' ')
+}
+
+const toggleMenu = (index: number, event: MouseEvent) => {
+	menuOpenIndex.value = menuOpenIndex.value === index ? null : index
+	menuTopPosition.value = `${event.clientY + 10}px`
+}
+
+onClickOutside(menuRef, () => {
+	menuOpenIndex.value = null
+})
+
+const showKey = (key: string) => {
+	let columnsLower = columns.value.map((col) =>
+		col.toLowerCase().split(' ').join('_')
+	)
+	return columnsLower.includes(key)
+}
+</script>
--- a/frontend/src/components/Controls/Code.vue
+++ b/frontend/src/components/Controls/Code.vue
@@ -0,0 +1,155 @@
+<template>
+	<div class="flex w-full flex-col gap-1.5">
+		<codemirror
+			v-model="code"
+			:extensions="extensions"
+			:tab-size="2"
+			:autofocus="autofocus"
+			:indent-with-tab="true"
+			:style="{ height: height, maxHeight: maxHeight }"
+			:disabled="readonly"
+			@blur="emitEditorValue"
+		/>
+		<Button
+			v-if="showSaveButton"
+			@click="emit('save', code)"
+			class="mt-3 w-full text-base"
+		>
+			{{ __('Save') }}
+		</Button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, computed, watch } from 'vue'
+import { Button } from 'frappe-ui'
+import { Codemirror } from 'vue-codemirror'
+import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
+import { LanguageSupport } from '@codemirror/language'
+import { EditorView } from '@codemirror/view'
+import { tomorrow } from 'thememirror'
+
+const props = withDefaults(
+	defineProps<{
+		language: 'json' | 'javascript' | 'html' | 'css' | 'python'
+		modelValue: string | object | Array<string | object> | null
+		height?: string
+		maxHeight?: string
+		autofocus?: boolean
+		showSaveButton?: boolean
+		showLineNumbers?: boolean
+		completions?: Function | null
+		label?: string
+		required?: boolean
+		readonly?: boolean
+	}>(),
+	{
+		language: 'javascript',
+		modelValue: null,
+		height: 'auto',
+		maxHeight: '250px',
+		showLineNumbers: true,
+		completions: null,
+	}
+)
+const emit = defineEmits(['update:modelValue', 'save'])
+
+const code = ref<string>('')
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		code.value =
+			typeof newVal === 'string' ? newVal : JSON.stringify(newVal, null, 2)
+	},
+	{ immediate: true }
+)
+
+watch(code, (val) => {
+	emit('update:modelValue', val)
+})
+
+const errorMessage = ref('')
+const emitEditorValue = () => {
+	try {
+		errorMessage.value = ''
+		let value = code.value || ''
+
+		if (!props.showSaveButton && !props.readonly) {
+			emit('update:modelValue', value)
+		}
+	} catch (e) {
+		console.error('Error while parsing JSON for editor', e)
+		errorMessage.value = `Invalid object/JSON: ${e.message}`
+	}
+}
+
+const languageExtension = ref<LanguageSupport>()
+const autocompleteExtension = ref()
+
+async function setLanguageExtension() {
+	const importMap = {
+		json: () => import('@codemirror/lang-json'),
+		javascript: () => import('@codemirror/lang-javascript'),
+		html: () => import('@codemirror/lang-html'),
+		css: () => import('@codemirror/lang-css'),
+		python: () => import('@codemirror/lang-python'),
+	}
+
+	const languageImport = importMap[props.language]
+	if (!languageImport) return
+
+	const module = await languageImport()
+	languageExtension.value = (module as any)[props.language]()
+
+	if (props.completions) {
+		const languageData = (module as any)[`${props.language}Language`]
+		autocompleteExtension.value = languageData.data.of({
+			autocomplete: props.completions,
+		})
+	}
+}
+
+onMounted(async () => {
+	await setLanguageExtension()
+})
+
+watch(
+	() => props.language,
+	async () => {
+		await setLanguageExtension()
+	},
+	{ immediate: true }
+)
+
+const extensions = computed(() => {
+	const baseExtensions = [
+		closeBrackets(),
+		tomorrow,
+		EditorView.theme({
+			'&': {
+				fontFamily: 'monospace',
+				fontSize: '12px',
+			},
+			'.cm-gutters': {
+				display: props.showLineNumbers ? 'flex' : 'none',
+			},
+		}),
+	]
+	if (languageExtension.value) {
+		baseExtensions.push(languageExtension.value)
+	}
+	if (autocompleteExtension.value) {
+		baseExtensions.push(autocompleteExtension.value)
+	}
+	const autocompletionOptions = {
+		activateOnTyping: true,
+		maxRenderedOptions: 10,
+		closeOnBlur: false,
+		icons: false,
+		optionClass: () => 'flex h-7 !px-2 items-center rounded !text-gray-600',
+	}
+	baseExtensions.push(autocompletion(autocompletionOptions))
+	return baseExtensions
+})
+</script>
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -12,6 +12,7 @@
 			:variant="attrs.variant"
 			:placeholder="attrs.placeholder"
 			:filterable="false"
+			:readonly="attrs.readonly"
 		>
 			<template #target="{ open, togglePopover }">
 				<slot name="target" v-bind="{ open, togglePopover }" />
--- a/frontend/src/components/Modals/AssessmentModal.vue
+++ b/frontend/src/components/Modals/AssessmentModal.vue
@@ -99,6 +99,7 @@ const assessmentTypes = computed(() => {
 	return [
 		{ label: 'Quiz', value: 'LMS Quiz' },
 		{ label: 'Assignment', value: 'LMS Assignment' },
+		{ label: 'Programming Exercise', value: 'LMS Programming Exercise' },
 	]
 })
 </script>
--- a/frontend/src/components/Modals/Event.vue
+++ b/frontend/src/components/Modals/Event.vue
@@ -255,6 +255,9 @@ const saveEvaluation = () => {
 				}
 				toast.success(__('Evaluation saved successfully'))
 			},
+			onError(err) {
+				toast.warning(__(err.messages?.[0] || err))
+			},
 		}
 	)
 }
@@ -277,6 +280,9 @@ const certificateResource = createResource({
 	onSuccess(data) {
 		certificate.name = data
 	},
+	onError(err) {
+		toast.warning(__(err.messages?.[0] || err))
+	},
 })

 const certificateDetails = createResource({
@@ -310,6 +316,9 @@ const saveCertificate = () => {
 			onSuccess: () => {
 				toast.success(__('Certificate saved successfully'))
 			},
+			onError(err) {
+				toast.error(__(err.messages?.[0] || err))
+			},
 		}
 	)
 }
--- a/frontend/src/components/Settings/Settings.vue
+++ b/frontend/src/components/Settings/Settings.vue
@@ -166,6 +166,12 @@ const tabsStructure = computed(() => {
 							doctype: 'Email Template',
 							type: 'Link',
 						},
+						{
+							label: 'Livecode URL',
+							name: 'livecode_url',
+							doctype: 'Livecode URL',
+							type: 'text',
+						},
 						{
 							label: 'Unsplash Access Key',
 							name: 'unsplash_access_key',
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@@ -0,0 +1,11 @@
+export {}
+
+declare global {
+  function __(text: string): string
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    __: (text: string) => string
+  }
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,2 +1,3 @@
@import './assets/Inter/inter.css';
@import 'frappe-ui/src/style.css';
+@import './styles/codemirror.css';
--- a/frontend/src/pages/Assignments.vue
+++ b/frontend/src/pages/Assignments.vue
@@ -22,14 +22,11 @@

 	<div class="md:w-3/4 md:mx-auto py-5 mx-5">
 		<div class="flex items-center justify-between mb-5">
-			<div
-				v-if="assignmentCount"
-				class="text-xl font-semibold text-ink-gray-7 mb-4"
-			>
+			<div v-if="assignmentCount" class="text-lg font-semibold text-ink-gray-9">
 				{{ __('{0} Assignments').format(assignmentCount) }}
 			</div>
 			<div
-				v-if="assignments.data?.length || assigmentCount > 0"
+				v-if="assignments.data?.length || assignmentCount > 0"
 				class="grid grid-cols-2 gap-5"
 			>
 				<FormControl
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -57,7 +57,7 @@
 		</div>
 		<div
 			v-if="courses.data?.length"
-			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4"
+			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-5"
 		>
 			<router-link
 				v-for="course in courses.data"
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -65,7 +65,7 @@
 				<div
 					class="border-r container pt-5 pb-10 px-5 h-full"
 					:class="{
-						'w-full md:w-3/4 mx-auto border-none !pt-10': zenModeEnabled,
+						'w-full md:w-3/5 mx-auto border-none !pt-10': zenModeEnabled,
 					}"
 				>
 					<div
@@ -296,6 +296,7 @@ import {
 import Discussions from '@/components/Discussions.vue'
 import { getEditorTools, enablePlyr } from '@/utils'
 import { sessionStore } from '@/stores/session'
+import { useSidebar } from '@/stores/sidebar'
 import EditorJS from '@editorjs/editorjs'
 import LessonContent from '@/components/LessonContent.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
@@ -316,6 +317,7 @@ const hasQuiz = ref(false)
 const discussionsContainer = ref(null)
 const timer = ref(0)
 const { brand } = sessionStore()
+const sidebarStore = useSidebar()
 let timerInterval

 const props = defineProps({
@@ -335,6 +337,8 @@ const props = defineProps({

 onMounted(() => {
 	startTimer()
+	console.log(sidebarStore.isSidebarCollapsed)
+	sidebarStore.isSidebarCollapsed = true
 	document.addEventListener('fullscreenchange', attachFullscreenEvent)
 	socket.on('update_lesson_progress', (data) => {
 		if (data.course === props.courseName) {
@@ -357,6 +361,7 @@ const attachFullscreenEvent = () => {

 onBeforeUnmount(() => {
 	document.removeEventListener('fullscreenchange', attachFullscreenEvent)
+	sidebarStore.isSidebarCollapsed = false
 })

 const lesson = createResource({
@@ -554,7 +559,7 @@ const canGoZen = () => {
 		user.data?.is_instructor ||
 		user.data?.is_evaluator
 	)
-		return false
+		return true
 	if (lesson.data?.membership) return true
 	return false
 }
--- a/frontend/src/pages/LessonForm.vue
+++ b/frontend/src/pages/LessonForm.vue
@@ -210,7 +210,7 @@ const addInstructorNotes = (data) => {
 const enableAutoSave = () => {
 	autoSaveInterval = setInterval(() => {
 		saveLesson({ showSuccessMessage: false })
-	}, 5000)
+	}, 10000)
 }

 const keyboardShortcut = (e) => {
@@ -385,8 +385,10 @@ const saveLesson = (e) => {
 		showSuccessMessage = true
 	}
 	editor.value.save().then((outputData) => {
+		outputData = removeEmptyBlocks(outputData)
 		lesson.content = JSON.stringify(outputData)
 		instructorEditor.value.save().then((outputData) => {
+			outputData = removeEmptyBlocks(outputData)
 			lesson.instructor_content = JSON.stringify(outputData)
 			if (lessonDetails.data?.lesson) {
 				editCurrentLesson()
@@ -397,6 +399,14 @@ const saveLesson = (e) => {
 	})
 }

+const removeEmptyBlocks = (outputData) => {
+	let blocks = outputData.blocks.filter((block) => {
+		return Object.keys(block.data).length > 0 || block.type == 'paragraph'
+	})
+	outputData.blocks = blocks
+	return outputData
+}
+
 const createNewLesson = () => {
 	newLessonResource.submit(
 		{},
@@ -686,7 +696,7 @@ iframe {
 }

 .ce-popover--opened > .ce-popover__container {
-	max-height: 320px;
+	max-height: unset;
 }

 .cdx-search-field__icon svg {
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
@@ -0,0 +1,255 @@
+<template>
+	<Dialog v-model="show" :options="{ size: '5xl' }">
+		<template #body-title>
+			<div class="text-xl font-semibold text-ink-gray-9">
+				{{
+					props.exerciseID === 'new'
+						? __('Create Programming Exercise')
+						: __('Edit Programming Exercise')
+				}}
+			</div>
+		</template>
+		<template #body-content>
+			<div class="grid grid-cols-2 gap-10">
+				<div class="space-y-4">
+					<FormControl
+						v-model="exercise.title"
+						:label="__('Title')"
+						:required="true"
+					/>
+					<FormControl
+						v-model="exercise.language"
+						:label="__('Language')"
+						type="select"
+						:options="languageOptions"
+						:required="true"
+					/>
+					<ChildTable
+						v-model="exercise.test_cases"
+						:label="__('Test Cases')"
+						:columns="testCaseColumns"
+						:required="true"
+						:addable="true"
+						:deletable="true"
+						:editable="true"
+						:placeholder="__('Add Test Case')"
+					/>
+				</div>
+				<div>
+					<div>
+						<div class="text-xs text-ink-gray-5 mb-2">
+							{{ __('Problem Statement') }}
+							<span class="text-ink-red-3">*</span>
+						</div>
+						<TextEditor
+							:content="exercise.problem_statement"
+							@change="(val: string) => (exercise.problem_statement = val)"
+							:editable="true"
+							:fixedMenu="true"
+							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[21rem] overflow-y-auto"
+						/>
+					</div>
+				</div>
+			</div>
+		</template>
+		<template #actions="{ close }">
+			<div class="flex justify-end space-x-2 group">
+				<Button
+					v-if="exerciseID != 'new'"
+					@click="deleteExercise(close)"
+					variant="outline"
+					theme="red"
+					class="invisible group-hover:visible"
+				>
+					<template #prefix>
+						<Trash2 class="size-4 stroke-1.5" />
+					</template>
+					{{ __('Delete') }}
+				</Button>
+				<router-link
+					:to="{
+						name: 'ProgrammingExerciseSubmission',
+						params: {
+							exerciseID: props.exerciseID,
+							submissionID: 'new',
+						},
+					}"
+				>
+					<Button>
+						<template #prefix>
+							<Play class="size-4 stroke-1.5" />
+						</template>
+						{{ __('Test this Exercise') }}
+					</Button>
+				</router-link>
+				<router-link
+					:to="{
+						name: 'ProgrammingExerciseSubmissions',
+						query: {
+							exercise: props.exerciseID,
+						},
+					}"
+				>
+					<Button>
+						<template #prefix>
+							<ClipboardList class="size-4 stroke-1.5" />
+						</template>
+						{{ __('Check Submission') }}
+					</Button>
+				</router-link>
+				<Button variant="solid" @click="saveExercise(close)">
+					{{ __('Save') }}
+				</Button>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import {
+	Button,
+	createListResource,
+	Dialog,
+	FormControl,
+	TextEditor,
+	toast,
+} from 'frappe-ui'
+import { computed, ref, watch } from 'vue'
+import {
+	ProgrammingExercise,
+	ProgrammingExercises,
+	TestCase,
+} from '@/types/programming-exercise'
+import ChildTable from '@/components/Controls/ChildTable.vue'
+import { ClipboardList, Play, Trash2 } from 'lucide-vue-next'
+
+const show = defineModel()
+const exercises = defineModel<ProgrammingExercises>('exercises')
+
+const exercise = ref<ProgrammingExercise>({
+	title: '',
+	language: 'Python',
+	problem_statement: '',
+	test_cases: [],
+})
+
+const languageOptions = [
+	{ label: 'Python', value: 'Python' },
+	{ label: 'JavaScript', value: 'JavaScript' },
+]
+
+const props = withDefaults(
+	defineProps<{
+		exerciseID: string
+	}>(),
+	{
+		exerciseID: 'new',
+	}
+)
+
+watch(
+	() => props.exerciseID,
+	() => {
+		setExerciseData()
+		fetchTestCases()
+	}
+)
+
+const setExerciseData = () => {
+	let isNew = true
+	exercises.value?.data.forEach((ex: ProgrammingExercise) => {
+		if (ex.name === props.exerciseID) {
+			isNew = false
+			exercise.value = { ...ex }
+		}
+	})
+
+	if (isNew) {
+		exercise.value = {
+			title: '',
+			language: 'Python',
+			problem_statement: '',
+			test_cases: [],
+		}
+	}
+}
+
+const testCases = createListResource({
+	doctype: 'LMS Test Case',
+	fields: ['input', 'expected_output', 'name'],
+	cache: ['testCases', props.exerciseID],
+	parent: 'LMS Programming Exercise',
+	onSuccess(data: TestCase[]) {
+		exercise.value.test_cases = data
+	},
+})
+
+const fetchTestCases = () => {
+	testCases.update({
+		filters: {
+			parent: props.exerciseID,
+			parenttype: 'LMS Programming Exercise',
+			parentfield: 'test_cases',
+		},
+	})
+	testCases.reload()
+}
+
+const saveExercise = (close: () => void) => {
+	if (props.exerciseID == 'new') createNewExercise(close)
+	else updateExercise(close)
+}
+
+const createNewExercise = (close: () => void) => {
+	exercises.value?.insert.submit(
+		{
+			...exercise.value,
+		},
+		{
+			onSuccess() {
+				close()
+				exercises.value?.reload()
+				toast.success(__('Programming Exercise created successfully'))
+			},
+			onError(err: any) {
+				toast.warning(__(err.messages?.[0] || err))
+			},
+		}
+	)
+}
+
+const updateExercise = (close: () => void) => {
+	exercises.value?.setValue.submit(
+		{
+			name: props.exerciseID,
+			...exercise.value,
+		},
+		{
+			onSuccess() {
+				close()
+				exercises.value?.reload()
+				toast.success(__('Programming Exercise updated successfully'))
+			},
+			onError(err: any) {
+				toast.warning(__(err.messages?.[0] || err))
+			},
+		}
+	)
+}
+
+const testCaseColumns = computed(() => {
+	return ['Input', 'Expected Output']
+})
+
+const deleteExercise = (close: () => void) => {
+	if (props.exerciseID == 'new') return
+	exercises.value?.delete.submit(props.exerciseID, {
+		onSuccess() {
+			toast.success(__('Programming Exercise deleted successfully'))
+			close()
+		},
+		onError(err: any) {
+			toast.warning(__(err.messages?.[0] || err))
+		},
+	})
+}
+</script>
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseModal.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseModal.vue
@@ -0,0 +1,53 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Add a programming exercise to your lesson'),
+			size: 'xl',
+			actions: [
+				{
+					label: __('Save'),
+					variant: 'solid',
+					onClick: () => {
+						saveExercise()
+					},
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="text-base">
+				<Link
+					v-model="exercise"
+					doctype="LMS Programming Exercise"
+					:label="__('Select a Programming Exercise')"
+				/>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Dialog } from 'frappe-ui'
+import { onMounted, nextTick, ref } from 'vue'
+import Link from '@/components/Controls/Link.vue'
+
+const show = ref(false)
+const exercise = ref(null)
+
+const props = defineProps({
+	onSave: {
+		type: Function,
+		required: true,
+	},
+})
+
+onMounted(async () => {
+	await nextTick()
+	show.value = true
+})
+
+const saveExercise = () => {
+	props.onSave(exercise.value)
+	show.value = false
+}
+</script>
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue
@@ -0,0 +1,439 @@
+<template>
+	<header
+		v-if="!fromLesson"
+		class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+	</header>
+	<div
+		v-if="falconError"
+		class="flex items-center justify-between p-3 text-sm bg-surface-amber-1 text-ink-amber-3"
+	>
+		<span>
+			{{ falconError }}
+		</span>
+		<Button v-if="user.data?.is_moderator" @click="openSettings('General')">
+			<template #prefix>
+				<Settings class="size-4 stroke-1.5" />
+			</template>
+			{{ __('Settings') }}
+		</Button>
+	</div>
+	<div class="grid grid-cols-2 h-[calc(100vh_-_3rem)]">
+		<div class="border-r py-5 px-8 h-full">
+			<div class="font-semibold mb-2">
+				{{ __('Problem Statement') }}
+			</div>
+			<div
+				v-html="exercise.doc?.problem_statement"
+				class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal"
+			></div>
+		</div>
+		<div>
+			<div class="flex items-center justify-between p-2 bg-surface-gray-2">
+				<div class="font-semibold">
+					{{ exercise.doc?.language }}
+				</div>
+				<div class="space-x-2">
+					<Badge
+						v-if="submission.doc?.status"
+						:theme="submission.doc.status == 'Passed' ? 'green' : 'red'"
+					>
+						{{ submission.doc.status }}
+					</Badge>
+					<Button
+						v-if="
+							!falconError &&
+							(submissionID == 'new' ||
+								user.data?.name == submission.doc?.owner)
+						"
+						variant="solid"
+						@click="submitCode"
+					>
+						<template #prefix>
+							<Play class="size-3" />
+						</template>
+						{{ __('Run') }}
+					</Button>
+				</div>
+			</div>
+			<div class="flex flex-col space-y-4 py-5 border-b">
+				<Code
+					v-model="code"
+					:language="exercise.doc?.language.toLowerCase()"
+					height="400px"
+					maxHeight="1000px"
+				/>
+				<span v-if="error" class="text-xs text-ink-gray-5 px-2">
+					{{ __('Compiler Message') }}:
+				</span>
+				<textarea
+					v-if="error"
+					v-model="errorMessage"
+					class="bg-surface-gray-1 border-none text-sm h-32 leading-6"
+					readonly
+				/>
+				<!-- <textarea v-else v-model="output" class="bg-surface-gray-1 border-none text-sm h-28 leading-6" readonly /> -->
+			</div>
+
+			<div ref="testCaseSection" class="p-5">
+				<span class="text-lg font-semibold text-ink-gray-9">
+					{{ __('Test Cases') }}
+				</span>
+				<div v-if="testCases.length" class="divide-y mt-5">
+					<div
+						v-for="(testCase, index) in testCases"
+						:key="testCase.input"
+						class="py-3"
+					>
+						<div class="flex items-center mb-3">
+							<span class=""> {{ __('Test {0}').format(index + 1) }} - </span>
+							<span
+								class="font-semibold ml-2 mr-1"
+								:class="
+									testCase.status === 'Passed'
+										? 'text-ink-green-3'
+										: 'text-ink-red-3'
+								"
+							>
+								{{ testCase.status }}
+							</span>
+							<!-- <span v-if="testCase.status === 'Passed'">
+								<Check class="size-4 text-ink-green-3" />
+							</span>
+							<span v-else>
+								<X class="size-4 text-ink-red-3" />
+							</span> -->
+						</div>
+						<div class="flex items-center justify-between w-[60%]">
+							<div v-if="testCase.input" class="space-y-2">
+								<div class="text-xs text-ink-gray-7">
+									{{ __('Input') }}
+								</div>
+								<div>{{ testCase.input }}</div>
+							</div>
+							<div class="space-y-2">
+								<div class="text-xs text-ink-gray-7">
+									{{ __('Your Output') }}
+								</div>
+								<div>
+									{{ testCase.output }}
+								</div>
+							</div>
+							<div class="space-y-2">
+								<div class="text-xs text-ink-gray-7">
+									{{ __('Expected Output') }}
+								</div>
+								<div>{{ testCase.expected_output }}</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div v-else class="text-sm text-ink-gray-6 mt-4">
+					{{ __('Please run the code to execute the test cases.') }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import {
+	Badge,
+	Breadcrumbs,
+	Button,
+	call,
+	createDocumentResource,
+	toast,
+	usePageMeta,
+} from 'frappe-ui'
+import { computed, inject, onMounted, ref, watch } from 'vue'
+import { Play, X, Check, Settings } from 'lucide-vue-next'
+import { sessionStore } from '@/stores/session'
+import { useRouter } from 'vue-router'
+import { openSettings } from '@/utils'
+
+const user = inject<any>('$user')
+const code = ref<string | null>('')
+const output = ref<string | null>(null)
+const error = ref<boolean | null>(null)
+const errorMessage = ref<string | null>(null)
+const testCaseSection = ref<HTMLElement | null>(null)
+const testCases = ref<TestCase[]>([])
+const boilerplate = ref<string>('')
+const { brand, livecodeURL } = sessionStore()
+const router = useRouter()
+const fromLesson = ref(false)
+const falconURL = ref<string>('https://falcon.frappe.io/')
+const falconError = ref<string | null>(null)
+
+const props = withDefaults(
+	defineProps<{
+		exerciseID: string
+		submissionID?: string
+	}>(),
+	{
+		submissionID: 'new',
+	}
+)
+
+onMounted(() => {
+	loadFalcon()
+	checkIfUserIsPermitted()
+	checkIfInLesson()
+	fetchSubmission()
+})
+
+const checkIfInLesson = () => {
+	if (new URLSearchParams(window.location.search).get('fromLesson')) {
+		fromLesson.value = true
+	}
+}
+
+const fetchSubmission = (name: string = '') => {
+	if (name) {
+		submission.name = name
+		submission.reload()
+	} else if (props.submissionID != 'new') {
+		submission.reload()
+	}
+}
+
+const exercise = createDocumentResource({
+	doctype: 'LMS Programming Exercise',
+	name: props.exerciseID,
+	cache: ['programmingExercise', props.exerciseID],
+	auto: true,
+})
+
+const submission = createDocumentResource({
+	doctype: 'LMS Programming Exercise Submission',
+	name: props.submissionID,
+	auto: false,
+	onError(error: any) {
+		if (error.messages?.[0].includes('not found')) {
+			router.push({
+				name: 'ProgrammingExerciseSubmission',
+				params: { exerciseID: props.exerciseID, submissionID: 'new' },
+			})
+		} else {
+			toast.error(__(error.messages?.[0] || error))
+		}
+	},
+})
+
+watch(exercise, () => {
+	updateCode()
+})
+
+const updateCode = (submissionCode = '') => {
+	updateBoilerPlate()
+	if (!code.value?.includes(boilerplate.value)) {
+		code.value = `${boilerplate.value}${code.value}`
+	}
+	if (submissionCode && !code.value?.includes(submissionCode)) {
+		code.value = `${code.value}${submissionCode}`
+	} else if (!submissionCode && !code.value) {
+		code.value = boilerplate.value
+	}
+}
+
+const updateBoilerPlate = () => {
+	if (exercise.doc?.language == 'Python') {
+		boilerplate.value = `with open("stdin", "r") as f:\n    data = f.read()\n\ninputs = data.split() if len(data) else []\n\n# inputs is a list of strings\n# write your code below\n\n`
+	} else if (exercise.doc?.language == 'JavaScript') {
+		boilerplate.value = `const fs = require('fs');\n\nlet input = fs.readFileSync('/app/stdin', 'utf8').trim();\nconst inputs = input.split("\\n");\n// inputs is an array of strings\n// write your code below\n`
+	}
+}
+
+const checkIfUserIsPermitted = (doc: any = null) => {
+	if (!user.data) {
+		window.location.href = `/login?redirect-to=/lms/programming-exercises/${props.exerciseID}/submission/${props.submissionID}`
+	}
+
+	if (!doc) return
+	if (
+		doc.owner != user.data?.name &&
+		!user.data?.is_instructor &&
+		!user.data?.is_moderator &&
+		!user.data.is_evaluator
+	) {
+		router.push({
+			name: 'ProgrammingExerciseSubmission',
+			params: { exerciseID: props.exerciseID, submissionID: 'new' },
+		})
+		return
+	}
+}
+
+const updateTestCases = (doc: any) => {
+	if (testCases.value.length === 0) {
+		testCases.value = doc.test_cases || []
+	}
+}
+
+watch(
+	() => submission.doc,
+	(doc) => {
+		if (doc) {
+			checkIfUserIsPermitted(doc)
+			updateTestCases(doc)
+			updateCode(doc.code)
+		}
+	},
+	{ immediate: true }
+)
+
+const loadFalcon = () => {
+	if (livecodeURL.data.includes('falcon.frappe.io') && !user.data?.is_fc_site) {
+		falconError.value = __(
+			'Only Frappe Cloud sites can use Falcon Live Code. Please migrate your site to Frappe Cloud or setup Falcon Live Code on your own server.'
+		)
+		return
+	} else if (livecodeURL.data) {
+		falconURL.value = livecodeURL.data
+	} else if (!livecodeURL.data && !user.data?.is_fc_site) {
+		falconError.value = __(
+			'Live Code URL is not set. Please set it from the Settings.'
+		)
+		return
+	}
+
+	return new Promise((resolve, reject) => {
+		const script = document.createElement('script')
+		script.src = `${falconURL.value}static/livecode.js`
+		script.onload = resolve
+		script.onerror = reject
+		document.head.appendChild(script)
+	})
+}
+
+const submitCode = async () => {
+	await runCode()
+	createSubmission()
+}
+
+const runCode = async () => {
+	if (!exercise.doc?.test_cases?.length) return
+
+	testCases.value = []
+	if (testCaseSection.value) {
+		testCaseSection.value.scrollIntoView({ behavior: 'smooth' })
+	}
+
+	for (const test_case of exercise.doc.test_cases) {
+		let result = await execute(test_case.input)
+		if (error.value) {
+			errorMessage.value = result
+			break
+		} else {
+			output.value = result
+		}
+		let status =
+			result.trim() === test_case.expected_output.trim() ? 'Passed' : 'Failed'
+		testCases.value.push({
+			input: test_case.input,
+			output: result,
+			expected_output: test_case.expected_output,
+			status: status,
+		})
+	}
+}
+
+const createSubmission = () => {
+	if (!testCases.value.length) return
+	let codeToSave = code.value?.replace(boilerplate.value, '') || ''
+
+	call('lms.lms.api.create_programming_exercise_submission', {
+		exercise: props.exerciseID,
+		submission: props.submissionID,
+		code: codeToSave,
+		test_cases: testCases.value,
+	})
+		.then((data: any) => {
+			if (props.submissionID == 'new') {
+				router.push({
+					name: 'ProgrammingExerciseSubmission',
+					params: { exerciseID: props.exerciseID, submissionID: data },
+				})
+				fetchSubmission(data)
+			} else {
+				fetchSubmission(props.submissionID)
+			}
+			toast.success(__('Submission saved!'))
+		})
+		.catch((error: any) => {
+			console.error('Error creating submission:', error)
+			toast.error(
+				__('Failed to submit. Please try again. {0}').format({ error })
+			)
+		})
+}
+
+const execute = (stdin = ''): Promise<string> => {
+	return new Promise((resolve, reject) => {
+		let outputChunks: string[] = []
+		let hasExited = false
+		let hasError = false
+
+		let session = new LiveCodeSession({
+			base_url: falconURL.value,
+			runtime: exercise.doc?.language.toLowerCase() || 'python',
+			code: code.value,
+			files: [{ filename: 'stdin', contents: stdin }],
+			onMessage: (msg: any) => {
+				console.log('msg', msg)
+
+				if (msg.msgtype === 'write' && msg.file === 'stdout') {
+					outputChunks.push(msg.data)
+				}
+
+				if (msg.msgtype === 'write' && msg.file === 'stderr') {
+					hasError = true
+					errorMessage.value = msg.data
+				}
+
+				if (msg.msgtype === 'exitstatus') {
+					hasExited = true
+					if (msg.exitstatus !== 0) {
+						error.value = true
+					} else {
+						error.value = false
+					}
+					resolve(outputChunks.join('').trim())
+				}
+			},
+		})
+
+		setTimeout(() => {
+			if (!hasExited) {
+				error.value = true
+				errorMessage.value = 'Execution timed out.'
+				reject('Execution timed out.')
+			}
+		}, 20000)
+	})
+}
+
+const breadcrumbs = computed(() => {
+	return [
+		{
+			label: __('Programming Exercise Submissions'),
+			route: { name: 'ProgrammingExerciseSubmissions' },
+		},
+		{ label: exercise.doc?.title },
+	]
+})
+
+usePageMeta(() => {
+	return {
+		title: __('Programming Exercise Submission'),
+		icon: brand.favicon,
+	}
+})
+</script>
+<style>
+.ProseMirror pre {
+	background: theme('colors.gray.200');
+	color: theme('colors.gray.900');
+}
+</style>
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue
@@ -0,0 +1,306 @@
+<template>
+	<header
+		class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+	</header>
+	<div class="p-6">
+		<div class="flex items-center justify-between space-x-32 mb-5">
+			<div class="text-xl font-semibold text-ink-gray-7">
+				{{
+					submissions.data?.length
+						? __('{0} Submissions').format(submissions.data.length)
+						: __('No Submissions')
+				}}
+			</div>
+			<div
+				v-if="submissions.data?.length"
+				class="grid grid-cols-3 gap-5 flex-1"
+			>
+				<Link
+					doctype="LMS Programming Exercise"
+					v-model="filters.exercise"
+					:placeholder="__('Filter by Exercise')"
+				/>
+				<Link
+					doctype="User"
+					v-model="filters.member"
+					:placeholder="__('Filter by Member')"
+					:readonly="isStudent"
+				/>
+				<FormControl
+					v-model="filters.status"
+					type="select"
+					:options="[
+						{ label: __(''), value: '' },
+						{ label: __('Passed'), value: 'Passed' },
+						{ label: __('Failed'), value: 'Failed' },
+					]"
+					:placeholder="__('Filter by Status')"
+				/>
+			</div>
+		</div>
+		<ListView
+			v-if="submissions.loading || submissions.data?.length"
+			:columns="submissionColumns"
+			:rows="submissions.data"
+			rowKey="name"
+			:options="{
+				selectable: true,
+			}"
+		>
+			<ListHeader
+				class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+			>
+				<ListHeaderItem
+					:item="item"
+					v-for="item in submissionColumns"
+					:key="item.key"
+				>
+					<template #prefix="{ item }">
+						<FeatherIcon :name="item.icon?.toString()" class="h-4 w-4" />
+					</template>
+				</ListHeaderItem>
+			</ListHeader>
+			<ListRows>
+				<router-link
+					v-for="row in submissions.data"
+					:to="{
+						name: 'ProgrammingExerciseSubmission',
+						params: {
+							exerciseID: row.exercise,
+							submissionID: row.name,
+						},
+					}"
+				>
+					<ListRow :row="row">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<template #prefix>
+									<div v-if="column.key == 'member_name'">
+										<Avatar
+											class="flex items-center"
+											:image="row['member_image']"
+											:label="item"
+											size="sm"
+										/>
+									</div>
+								</template>
+								<div v-if="column.key == 'status'">
+									<Badge
+										:theme="row[column.key] === 'Passed' ? 'green' : 'red'"
+									>
+										{{ row[column.key] }}
+									</Badge>
+								</div>
+								<div v-else>
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</router-link>
+			</ListRows>
+			<ListSelectBanner>
+				<template #actions="{ unselectAll, selections }">
+					<div class="flex gap-2">
+						<Button
+							variant="ghost"
+							@click="deleteExercises(selections, unselectAll)"
+						>
+							<Trash2 class="h-4 w-4 stroke-1.5" />
+						</Button>
+					</div>
+				</template>
+			</ListSelectBanner>
+		</ListView>
+		<EmptyState v-else type="Programming Exercise Submissions" />
+		<div
+			v-if="submissions.data && submissions.hasNextPage"
+			class="flex justify-center my-5"
+		>
+			<Button @click="submissions.next()">
+				{{ __('Load More') }}
+			</Button>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import {
+	Avatar,
+	Badge,
+	Breadcrumbs,
+	Button,
+	createListResource,
+	FeatherIcon,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	ListSelectBanner,
+	usePageMeta,
+	toast,
+} from 'frappe-ui'
+import type {
+	ProgrammingExerciseSubmission,
+	Filters,
+} from '@/pages/ProgrammingExercises/types'
+import { computed, inject, onMounted, ref, watch } from 'vue'
+import { sessionStore } from '@/stores/session'
+import { useRouter } from 'vue-router'
+import { Trash2 } from 'lucide-vue-next'
+import Link from '@/components/Controls/Link.vue'
+import EmptyState from '@/components/EmptyState.vue'
+
+const { brand } = sessionStore()
+const dayjs = inject('$dayjs') as any
+const user = inject('$user') as any
+const filterFields = ['exercise', 'member', 'status']
+const filters = ref<Filters>({
+	exercise: '',
+	member: '',
+	status: '',
+})
+const router = useRouter()
+
+onMounted(() => {
+	setFiltersFromRoute()
+	fetchBasedOnRole()
+})
+
+const setFiltersFromRoute = () => {
+	filterFields.forEach((field) => {
+		if (router.currentRoute.value.query[field]) {
+			filters.value[field as keyof Filters] = router.currentRoute.value.query[
+				field
+			] as string
+		}
+	})
+}
+
+const fetchBasedOnRole = () => {
+	if (isStudent.value) {
+		filters.value['member'] = user.data?.name
+	} else {
+		submissions.reload()
+	}
+}
+
+const submissions = createListResource({
+	doctype: 'LMS Programming Exercise Submission',
+	fields: [
+		'name',
+		'exercise',
+		'exercise_title',
+		'member_name',
+		'member_image',
+		'status',
+		'modified',
+	],
+	orderBy: 'modified desc',
+	transform(data: ProgrammingExercise[]) {
+		return data.map((submission: ProgrammingExerciseSubmission) => {
+			return {
+				...submission,
+				modified: dayjs(submission.modified).fromNow(),
+			}
+		})
+	},
+})
+
+watch(filters.value, () => {
+	let filtersToApply: Record<string, any> = {}
+	filterFields.forEach((field) => {
+		if (filters.value[field as keyof Filters]) {
+			filtersToApply[field] = filters.value[field as keyof Filters]
+			router.push({
+				query: {
+					...router.currentRoute.value.query,
+					[field]: filters.value[field as keyof Filters],
+				},
+			})
+		} else {
+			delete filtersToApply[field]
+			const query = { ...router.currentRoute.value.query }
+			delete query[field]
+			router.push({
+				query,
+			})
+		}
+	})
+
+	submissions.update({
+		filters: {
+			...filtersToApply,
+		},
+	})
+	submissions.reload()
+})
+
+const deleteExercises = (selections: Set<string>, unselectAll: () => void) => {
+	Array.from(selections).forEach(async (submission: string) => {
+		await submissions.delete.submit(submission)
+	})
+	unselectAll()
+	toast.success(__('Submissions deleted successfully'))
+}
+
+const isStudent = computed(() => {
+	return (
+		!user.data?.is_instructor &&
+		!user.data?.is_moderator &&
+		!user.data?.is_evaluator
+	)
+})
+
+const submissionColumns = computed(() => {
+	return [
+		{
+			label: __('Member'),
+			key: 'member_name',
+			width: '20%',
+			icon: 'user',
+		},
+		{
+			label: __('Exercise'),
+			key: 'exercise_title',
+			width: '30%',
+			icon: 'code',
+		},
+		{
+			label: __('Status'),
+			key: 'status',
+			width: '20%',
+			icon: 'check-circle',
+		},
+		{
+			label: __('Modified'),
+			key: 'modified',
+			width: '20%',
+			icon: 'clock',
+			align: 'right',
+		},
+	]
+})
+
+const breadcrumbs = computed(() => {
+	return [
+		{
+			label: __('Programming Exercise Submissions'),
+			route: {
+				name: 'ProgrammingExerciseSubmissions',
+			},
+		},
+	]
+})
+
+usePageMeta(() => {
+	return {
+		title: __('Programming Exercises'),
+		icon: brand.favicon,
+	}
+})
+</script>
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue
@@ -0,0 +1,170 @@
+<template>
+	<header
+		class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+		<div class="space-x-2">
+			<router-link
+				:to="{
+					name: 'ProgrammingExerciseSubmissions',
+				}"
+			>
+				<Button>
+					<template #prefix>
+						<ClipboardList class="size-4 stroke-1.5" />
+					</template>
+					{{ __('Check All Submissions') }}
+				</Button>
+			</router-link>
+			<Button
+				v-if="!readOnlyMode"
+				variant="solid"
+				@click="
+					() => {
+						exerciseID = 'new'
+						showForm = true
+					}
+				"
+			>
+				<template #prefix>
+					<Plus class="h-4 w-4 stroke-1.5" />
+				</template>
+				{{ __('New') }}
+			</Button>
+		</div>
+	</header>
+	<div class="md:w-4/5 md:mx-auto p-5">
+		<div class="flex items-center justify-between mb-5">
+			<div v-if="exerciseCount" class="text-lg font-semibold text-ink-gray-9">
+				{{ __('{0} Exercises').format(exerciseCount) }}
+			</div>
+			<div
+				v-if="exercises.data?.length || exerciseCount > 0"
+				class="grid grid-cols-2 gap-5"
+			>
+				<!-- <FormControl
+                    v-model="titleFilter"
+                    :placeholder="__('Search by title')"
+                />
+                <FormControl
+                    v-model="typeFilter"
+                    type="select"
+                    :options="assignmentTypes"
+                    :placeholder="__('Type')"
+                /> -->
+			</div>
+		</div>
+
+		<div
+			v-if="exercises.data?.length"
+			class="grid grid-cols-1 md:grid-cols-3 gap-4"
+		>
+			<div
+				v-for="exercise in exercises.data"
+				:key="exercise.name"
+				@click="
+					() => {
+						exerciseID = exercise.name
+						showForm = true
+					}
+				"
+				class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-3 space-y-2 cursor-pointer"
+			>
+				<div class="text-lg font-semibold text-ink-gray-9">
+					{{ exercise.title }}
+				</div>
+				<div class="text-sm text-ink-gray-7">
+					{{ exercise.language }}
+				</div>
+			</div>
+		</div>
+		<EmptyState v-else type="Programming Exercises" />
+		<div
+			v-if="exercises.data && exercises.hasNextPage"
+			class="flex justify-center my-5"
+		>
+			<Button @click="exercises.next()">
+				{{ __('Load More') }}
+			</Button>
+		</div>
+	</div>
+	<ProgrammingExerciseForm
+		v-model="showForm"
+		:exerciseID="exerciseID"
+		v-model:exercises="exercises"
+	/>
+</template>
+<script setup lang="ts">
+import { computed, inject, onMounted, ref } from 'vue'
+import {
+	Breadcrumbs,
+	Button,
+	call,
+	createListResource,
+	usePageMeta,
+} from 'frappe-ui'
+import { ClipboardList, Plus } from 'lucide-vue-next'
+import { sessionStore } from '@/stores/session'
+import { useRouter } from 'vue-router'
+import ProgrammingExerciseForm from '@/pages/ProgrammingExercises/ProgrammingExerciseForm.vue'
+
+const exerciseCount = ref<number>(0)
+const readOnlyMode = window.read_only_mode
+const { brand } = sessionStore()
+const showForm = ref<boolean>(false)
+const exerciseID = ref<string | null>('new')
+const user = inject<any>('$user')
+const router = useRouter()
+
+onMounted(() => {
+	validatePermissions()
+	getExerciseCount()
+})
+
+const validatePermissions = () => {
+	if (
+		!user.data?.is_instructor &&
+		!user.data?.is_moderator &&
+		!user.data?.is_evaluator
+	) {
+		router.push({
+			name: 'ProgrammingExerciseSubmissions',
+		})
+	}
+}
+
+const getExerciseCount = () => {
+	call('frappe.client.get_count', {
+		doctype: 'LMS Programming Exercise',
+	})
+		.then((count: number) => {
+			exerciseCount.value = count
+		})
+		.catch((error: any) => {
+			console.error('Error fetching exercise count:', error)
+		})
+}
+
+const exercises = createListResource({
+	doctype: 'LMS Programming Exercise',
+	cache: ['programmingExercises'],
+	fields: ['name', 'title', 'language', 'problem_statement'],
+	auto: true,
+})
+
+usePageMeta(() => {
+	return {
+		title: __('Programming Exercises'),
+		icon: brand.favicon,
+	}
+})
+
+const breadcrumbs = computed(() => {
+	return [
+		{
+			label: __('Programming Exercises'),
+			route: { name: 'ProgrammingExercises' },
+		},
+	]
+})
+</script>
--- a/frontend/src/pages/ProgrammingExercises/types.ts
+++ b/frontend/src/pages/ProgrammingExercises/types.ts
@@ -0,0 +1,47 @@
+interface ProgrammingExercise {
+    name: string;
+    title: string;
+    language: 'Python' | 'JavaScript';
+    test_cases_count: number;
+    problem_statement: string;
+    test_cases: [TestCase];
+}
+
+interface TestCase {
+    name: string;
+    input: string;
+    expected_output: string;
+    output: string;
+    status: 'Passed' | 'Failed';
+}
+
+type Filters = {
+    exercise?: string,
+    member?: string,
+    status?: string
+}
+
+type ProgrammingExercises = {
+	data: ProgrammingExercise[]
+	reload: () => void
+	hasNextPage: boolean
+	next: () => void
+	setValue: {
+		submit: (
+			data: ProgrammingExercise,
+			options?: { onSuccess?: () => void }
+		) => void
+	}
+	insert: {
+		submit: (
+			data: ProgrammingExercise,
+			options?: { onSuccess?: () => void }
+		) => void
+	}
+	delete: {
+		submit: (
+			name: string,
+			options?: { onSuccess?: () => void }
+		) => void
+	}
+}
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -215,6 +215,30 @@ const routes = [
 		name: 'PersonaForm',
 		component: () => import('@/pages/PersonaForm.vue'),
 	},
+	{
+		path: '/programming-exercises',
+		name: 'ProgrammingExercises',
+		component: () =>
+			import('@/pages/ProgrammingExercises/ProgrammingExercises.vue'),
+	},
+	{
+		path: '/programming-exercises/submissions',
+		name: 'ProgrammingExerciseSubmissions',
+		component: () =>
+			import(
+				'@/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue'
+			),
+		props: true,
+	},
+	{
+		path: '/programming-exercises/:exerciseID/submission/:submissionID',
+		name: 'ProgrammingExerciseSubmission',
+		component: () =>
+			import(
+				'@/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue'
+			),
+		props: true,
+	},
 ]

 let router = createRouter({
--- a/frontend/src/stores/session.js
+++ b/frontend/src/stores/session.js
@@ -60,6 +60,16 @@ export const sessionStore = defineStore('lms-session', () => {
 		auto: false,
 	})

+	const livecodeURL = createResource({
+		url: 'frappe.client.get_single_value',
+		params: {
+			doctype: 'LMS Settings',
+			field: 'livecode_url',
+		},
+		cache: 'livecodeURL',
+		auto: true,
+	})
+
 	return {
 		user,
 		isLoggedIn,
@@ -68,5 +78,6 @@ export const sessionStore = defineStore('lms-session', () => {
 		brand,
 		branding,
 		sidebarSettings,
+		livecodeURL,
 	}
 })
--- a/frontend/src/styles/codemirror.css
+++ b/frontend/src/styles/codemirror.css
@@ -0,0 +1,65 @@
+.cm-editor {
+	user-select: text;
+	padding: 0px !important;
+	position: relative !important;
+}
+.cm-gutters {
+	@apply !border-0 !bg-transparent !px-1.5 !text-xs !leading-6 !text-gray-500;
+}
+.cm-foldGutter span {
+	@apply !hidden !opacity-0;
+}
+.cm-gutterElement {
+	@apply !text-left;
+}
+.cm-activeLine {
+	@apply !bg-transparent;
+}
+.cm-activeLineGutter {
+	@apply !bg-transparent text-gray-600;
+}
+.cm-editor {
+	width: 100%;
+	user-select: text;
+}
+.cm-placeholder {
+	@apply !leading-6 !text-gray-500;
+}
+.cm-scroller {
+	@apply !font-mono !leading-6 !text-gray-600;
+}
+.cm-matchingBracket {
+	font-weight: 500 !important;
+	background: none !important;
+	border-bottom: 1px solid #000 !important;
+	outline: none !important;
+}
+.cm-focused {
+	outline: none !important;
+}
+.cm-tooltip-autocomplete {
+	@apply !rounded-lg !shadow-md !bg-surface-white !p-1.5 !border-none;
+}
+.cm-tooltip-autocomplete > ul {
+	font-family: 'Inter' !important;
+}
+.cm-tooltip-autocomplete ul li[aria-selected='true'] {
+	@apply !rounded !bg-gray-200/80;
+	color: #000 !important;
+}
+.cm-completionLabel {
+	margin-right: 1rem !important;
+}
+.cm-completionDetail {
+	margin-left: auto !important;
+}
+.inline-expression .cm-content {
+	padding: 0 !important;
+	line-height: 26px !important;
+}
+.inline-expression .cm-placeholder {
+	line-height: 26px !important;
+}
+.inline-expression .cm-gutters {
+	line-height: 26px !important;
+}
--- a/frontend/src/utils/assignment.js
+++ b/frontend/src/utils/assignment.js
@@ -56,12 +56,18 @@ export class Assignment {
 			})
 			return
 		}
-		this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center bg-surface-menu-bar mb-2'>
-            <span class="font-medium">
-                Assignment: ${assignment}
-            </span>
-        </div>`
-		return
+		call('frappe.client.get_value', {
+			doctype: 'LMS Assignment',
+			name: assignment,
+			fieldname: ['title'],
+		}).then((data) => {
+			this.wrapper.innerHTML = `<div class='border rounded-md p-4 text-center bg-surface-menu-bar mb-4'>
+				<span class="font-medium">
+					Assignment: ${data.title}
+				</span>
+			</div>`
+			return
+		})
 	}

 	renderAssignmentModal() {
@@ -79,7 +85,8 @@ export class Assignment {
 		app.mount(this.wrapper)
 	}

-	save(blockContent) {
+	save() {
+		if (Object.keys(this.data).length === 0) return {}
 		return {
 			assignment: this.data.assignment,
 		}
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -2,6 +2,7 @@ import { watch } from 'vue'
 import { call, toast } from 'frappe-ui'
 import { useTimeAgo } from '@vueuse/core'
 import { Quiz } from '@/utils/quiz'
+import { Program } from '@/utils/program'
 import { Assignment } from '@/utils/assignment'
 import { Upload } from '@/utils/upload'
 import { Markdown } from '@/utils/markdownParser'
@@ -148,6 +149,7 @@ export function getEditorTools() {
 		},
 		quiz: Quiz,
 		assignment: Assignment,
+		program: Program,
 		upload: Upload,
 		markdown: {
 			class: Markdown,
@@ -437,6 +439,17 @@ export function getSidebarLinks() {
 			to: 'Batches',
 			activeFor: ['Batches', 'BatchDetail', 'Batch', 'BatchForm'],
 		},
+		{
+			label: 'Programming Exercises',
+			icon: 'Code',
+			to: 'ProgrammingExercises',
+			activeFor: [
+				'ProgrammingExercises',
+				'ProgrammingExerciseForm',
+				'ProgrammingExerciseSubmissions',
+				'ProgrammingExerciseSubmission',
+			],
+		},
 		{
 			label: 'Certified Members',
 			icon: 'GraduationCap',
@@ -565,16 +578,17 @@ export const enablePlyr = () => {
 	})
 }

-export const openSettings = (category, close) => {
+export const openSettings = (category, close = null) => {
 	const settingsStore = useSettings()
-	close()
+	if (close) {
+		close()
+	}
 	settingsStore.activeTab = category
 	settingsStore.isSettingsOpen = true
+	console.log(settingsStore.activeTab, settingsStore.isSettingsOpen)
 }

 export const cleanError = (message) => {
-	// Remove HTML tags but keep the text within the tags
-
 	const cleanMessage = message.replace(/<[^>]+>/g, (match) => {
 		return match.replace(/<\/?[^>]+(>|$)/g, '')
 	})
--- a/frontend/src/utils/program.ts
+++ b/frontend/src/utils/program.ts
@@ -0,0 +1,101 @@
+import { createApp, h } from 'vue'
+import { Code } from 'lucide-vue-next'
+import translationPlugin from '@/translation'
+import ProgrammingExerciseModal from '@/pages/ProgrammingExercises/ProgrammingExerciseModal.vue';
+import { call } from 'frappe-ui';
+import { usersStore } from '@/stores/user'
+
+
+export class Program {
+
+    data: any;
+    api: any;
+    readOnly: boolean;
+    wrapper: HTMLDivElement;
+
+    constructor({ data, api, readOnly }: { data: any; api: any; readOnly: boolean }) {
+        this.data = data;
+        this.api = api;
+        this.readOnly = readOnly;
+    }
+
+    static get toolbox() {
+        const app = createApp({
+            render: () => h(Code, { size: 5, strokeWidth: 1.5 }),
+        })
+
+        const div = document.createElement('div')
+        app.mount(div)
+
+        return {
+            title: __('Programming Exercise'),
+            icon: div.innerHTML,
+        }
+    }
+
+    static get isReadOnlySupported() {
+		return true
+	}
+
+    render() {
+		this.wrapper = document.createElement('div')
+		if (Object.keys(this.data).length) {
+			this.renderExercise(this.data.exercise)
+		} else {
+			this.renderModal()
+		}
+		return this.wrapper
+	}
+
+    renderModal() {
+		if (this.readOnly) {
+			return
+		}
+		const app = createApp(ProgrammingExerciseModal, {
+            onSave: (exercise: string) => {
+				this.data.exercise = exercise
+				this.renderExercise(exercise)
+			},
+        })
+		app.use(translationPlugin)
+		app.mount(this.wrapper)
+    }
+
+    renderExercise(exercise: string) {
+        if (this.readOnly) {
+            const { userResource } = usersStore()
+            call('frappe.client.get_value', {
+                doctype: 'LMS Programming Exercise Submission',
+                filters: {
+                    exercise: exercise,
+                    member: userResource.data?.name,
+                },
+                fieldname: ['name'],
+            }).then((data: { name: string }) => {
+                let submission = data.name || 'new'
+                this.wrapper.innerHTML = `<iframe src="/lms/exercises/${exercise}/submission/${submission}?fromLesson=1" class="w-full h-[900px] border rounded-md"></iframe>`
+            })
+            return
+        } 
+        call("frappe.client.get_value", {
+            doctype: 'LMS Programming Exercise',
+            name: exercise,
+            fieldname: "title"
+        }).then((data: { title: string }) => {
+            this.wrapper.innerHTML = `<div class='border rounded-md p-4 text-center bg-surface-menu-bar mb-4'>
+                <span class="font-medium">
+                    Programming Exercise: ${data.title}
+                </span>
+            </div>`
+            return
+        })
+        
+    }
+
+    save() {
+        if (!this.data.exercise) return {}
+		return {
+			exercise: this.data.exercise,
+		}
+	}
+}
--- a/frontend/src/utils/quiz.js
+++ b/frontend/src/utils/quiz.js
@@ -45,7 +45,7 @@ export class Quiz {
 			this.wrapper.innerHTML = `<iframe src="/lms/quiz/${quiz}?fromLesson=1" class="w-full h-[500px]"></iframe>`
 			return
 		}
-		this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center bg-surface-menu-bar mb-2'>
+		this.wrapper.innerHTML = `<div class='border rounded-md p-4 text-center bg-surface-menu-bar mb-4'>
            <span class="font-medium">
                Quiz: ${quiz}
            </span>
@@ -68,7 +68,8 @@ export class Quiz {
 		app.mount(this.wrapper)
 	}

-	save(blockContent) {
+	save() {
+		if (Object.keys(this.data).length === 0) return {}
 		return {
 			quiz: this.data.quiz,
 		}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -10,11 +10,12 @@
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
+    "types": ["./globals"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/*.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/lms/lms/api.py
+++ b/lms/lms/api.py
@@ -1493,3 +1493,69 @@ def update_meta_info(type, route, meta_tags):
 				print(new_tag)
 				new_tag.insert()
 				print(new_tag.as_dict())
+
+
+@frappe.whitelist()
+def create_programming_exercise_submission(exercise, submission, code, test_cases):
+	if submission == "new":
+		return make_new_exercise_submission(exercise, code, test_cases)
+	else:
+		update_exercise_submission(submission, code, test_cases)
+
+
+def make_new_exercise_submission(exercise, code, test_cases):
+	submission = frappe.new_doc("LMS Programming Exercise Submission")
+	submission.exercise = exercise
+	submission.member = frappe.session.user
+	submission.code = code
+
+	for test_case in test_cases:
+		submission.append(
+			"test_cases",
+			{
+				"input": test_case.get("input"),
+				"output": test_case.get("output"),
+				"expected_output": test_case.get("expected_output"),
+				"status": test_case.get("status", test_case.get("status", "Failed")),
+			},
+		)
+
+	submission.status = get_exercise_status(test_cases)
+	submission.insert()
+	return submission.name
+
+
+def update_exercise_submission(submission, code, test_cases):
+	update_test_cases(test_cases, submission)
+	status = get_exercise_status(test_cases)
+	frappe.db.set_value(
+		"LMS Programming Exercise Submission", submission, {"status": status, "code": code}
+	)
+
+
+def get_exercise_status(test_cases):
+	if not test_cases:
+		return "Failed"
+
+	if all(row.get("status", "Failed") == "Passed" for row in test_cases):
+		return "Passed"
+	else:
+		return "Failed"
+
+
+def update_test_cases(test_cases, submission):
+	frappe.db.delete("LMS Test Case Submission", {"parent": submission})
+	for row in test_cases:
+		test_case = frappe.new_doc("LMS Test Case Submission")
+		test_case.update(
+			{
+				"parent": submission,
+				"parenttype": "LMS Programming Exercise Submission",
+				"parentfield": "test_cases",
+				"input": row.get("input"),
+				"output": row.get("output"),
+				"expected_output": row.get("expected_output"),
+				"status": row.get("status", "Failed"),
+			}
+		)
+		test_case.insert()
--- a/lms/lms/doctype/lms_programming_exercise/init.py
+++ b/lms/lms/doctype/lms_programming_exercise/init.py
--- a/lms/lms/doctype/lms_programming_exercise/lms_programming_exercise.js
+++ b/lms/lms/doctype/lms_programming_exercise/lms_programming_exercise.js
@@ -0,0 +1,8 @@
+// Copyright (c) 2025, Frappe and contributors
+// For license information, please see license.txt
+
+// frappe.ui.form.on("LMS Programming Exercise", {
+// 	refresh(frm) {
+
+// 	},
+// });
--- a/lms/lms/doctype/lms_programming_exercise/lms_programming_exercise.json
+++ b/lms/lms/doctype/lms_programming_exercise/lms_programming_exercise.json
@@ -0,0 +1,136 @@
+{
+ "actions": [],
+ "allow_rename": 1,
+ "creation": "2025-06-18 15:02:36.198855",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "title",
+  "column_break_jlzi",
+  "language",
+  "section_break_tjwv",
+  "problem_statement",
+  "section_break_ftkh",
+  "test_cases"
+ ],
+ "fields": [
+  {
+   "fieldname": "title",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Title",
+   "reqd": 1
+  },
+  {
+   "fieldname": "problem_statement",
+   "fieldtype": "Text Editor",
+   "in_list_view": 1,
+   "label": "Problem Statement",
+   "reqd": 1
+  },
+  {
+   "default": "Python",
+   "fieldname": "language",
+   "fieldtype": "Select",
+   "label": "Language",
+   "options": "Python\nJavaScript",
+   "reqd": 1
+  },
+  {
+   "fieldname": "column_break_jlzi",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "section_break_tjwv",
+   "fieldtype": "Section Break"
+  },
+  {
+   "fieldname": "section_break_ftkh",
+   "fieldtype": "Section Break"
+  },
+  {
+   "fieldname": "test_cases",
+   "fieldtype": "Table",
+   "label": "Test Cases",
+   "options": "LMS Test Case"
+  }
+ ],
+ "grid_page_length": 50,
+ "index_web_pages_for_search": 1,
+ "links": [
+  {
+   "link_doctype": "LMS Programming Exercise Submission",
+   "link_fieldname": "exercise"
+  }
+ ],
+ "modified": "2025-06-24 14:42:27.463492",
+ "modified_by": "sayali@frappe.io",
+ "module": "LMS",
+ "name": "LMS Programming Exercise",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "System Manager",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Moderator",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Course Creator",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Batch Evaluator",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "LMS Student",
+   "share": 1
+  }
+ ],
+ "row_format": "Dynamic",
+ "show_title_field_in_link": 1,
+ "sort_field": "creation",
+ "sort_order": "DESC",
+ "states": [],
+ "title_field": "title"
+}
--- a/lms/lms/doctype/lms_programming_exercise/lms_programming_exercise.py
+++ b/lms/lms/doctype/lms_programming_exercise/lms_programming_exercise.py
@@ -0,0 +1,15 @@
+# Copyright (c) 2025, Frappe and contributors
+# For license information, please see license.txt
+
+import frappe
+from frappe import _
+from frappe.model.document import Document
+
+
+class LMSProgrammingExercise(Document):
+	def validate(self):
+		self.validate_test_cases()
+
+	def validate_test_cases(self):
+		if not self.test_cases:
+			frappe.throw(_("At least one test case is required for the programming exercise."))
--- a/lms/lms/doctype/lms_programming_exercise/test_lms_programming_exercise.py
+++ b/lms/lms/doctype/lms_programming_exercise/test_lms_programming_exercise.py
@@ -0,0 +1,30 @@
+# Copyright (c) 2025, Frappe and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests import IntegrationTestCase, UnitTestCase
+
+
+# On IntegrationTestCase, the doctype test records and all
+# link-field test record dependencies are recursively loaded
+# Use these module variables to add/remove to/from that list
+EXTRA_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+IGNORE_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+
+
+class UnitTestLMSProgrammingExercise(UnitTestCase):
+	"""
+	Unit tests for LMSProgrammingExercise.
+	Use this class for testing individual functions and methods.
+	"""
+
+	pass
+
+
+class IntegrationTestLMSProgrammingExercise(IntegrationTestCase):
+	"""
+	Integration tests for LMSProgrammingExercise.
+	Use this class for testing interactions between multiple components.
+	"""
+
+	pass
--- a/lms/lms/doctype/lms_programming_exercise_submission/init.py
+++ b/lms/lms/doctype/lms_programming_exercise_submission/init.py
--- a/lms/lms/doctype/lms_programming_exercise_submission/lms_programming_exercise_submission.js
+++ b/lms/lms/doctype/lms_programming_exercise_submission/lms_programming_exercise_submission.js
@@ -0,0 +1,8 @@
+// Copyright (c) 2025, Frappe and contributors
+// For license information, please see license.txt
+
+// frappe.ui.form.on("LMS Programming Exercise Submission", {
+// 	refresh(frm) {
+
+// 	},
+// });
--- a/lms/lms/doctype/lms_programming_exercise_submission/lms_programming_exercise_submission.json
+++ b/lms/lms/doctype/lms_programming_exercise_submission/lms_programming_exercise_submission.json
@@ -0,0 +1,172 @@
+{
+ "actions": [],
+ "allow_rename": 1,
+ "creation": "2025-06-18 20:01:37.678342",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "exercise",
+  "exercise_title",
+  "status",
+  "column_break_jkjs",
+  "member",
+  "member_name",
+  "member_image",
+  "section_break_onmz",
+  "code",
+  "section_break_idyi",
+  "test_cases"
+ ],
+ "fields": [
+  {
+   "fieldname": "exercise",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "label": "Exercise",
+   "options": "LMS Programming Exercise",
+   "reqd": 1
+  },
+  {
+   "fieldname": "member",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "label": "Member",
+   "options": "User",
+   "reqd": 1
+  },
+  {
+   "fetch_from": "member.full_name",
+   "fieldname": "member_name",
+   "fieldtype": "Data",
+   "label": "Member Name",
+   "read_only": 1
+  },
+  {
+   "fieldname": "status",
+   "fieldtype": "Select",
+   "label": "Status",
+   "options": "\nPassed\nFailed"
+  },
+  {
+   "fieldname": "column_break_jkjs",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "section_break_idyi",
+   "fieldtype": "Section Break"
+  },
+  {
+   "fieldname": "test_cases",
+   "fieldtype": "Table",
+   "label": "Test Cases",
+   "options": "LMS Test Case Submission"
+  },
+  {
+   "fieldname": "section_break_onmz",
+   "fieldtype": "Section Break"
+  },
+  {
+   "fieldname": "code",
+   "fieldtype": "Code",
+   "label": "Code",
+   "reqd": 1
+  },
+  {
+   "fetch_from": "exercise.title",
+   "fieldname": "exercise_title",
+   "fieldtype": "Data",
+   "label": "Exercise Title",
+   "read_only": 1
+  },
+  {
+   "fetch_from": "member.user_image",
+   "fieldname": "member_image",
+   "fieldtype": "Attach",
+   "label": "Member Image"
+  }
+ ],
+ "grid_page_length": 50,
+ "index_web_pages_for_search": 1,
+ "links": [],
+ "modified": "2025-06-24 14:42:08.288983",
+ "modified_by": "sayali@frappe.io",
+ "module": "LMS",
+ "name": "LMS Programming Exercise Submission",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "System Manager",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Moderator",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Course Creator",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Batch Evaluator",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "LMS Student",
+   "share": 1,
+   "write": 1
+  }
+ ],
+ "row_format": "Dynamic",
+ "show_title_field_in_link": 1,
+ "sort_field": "creation",
+ "sort_order": "DESC",
+ "states": [
+  {
+   "color": "Green",
+   "title": "Passed"
+  },
+  {
+   "color": "Red",
+   "title": "Failed"
+  }
+ ],
+ "title_field": "member_name"
+}
--- a/lms/lms/doctype/lms_programming_exercise_submission/lms_programming_exercise_submission.py
+++ b/lms/lms/doctype/lms_programming_exercise_submission/lms_programming_exercise_submission.py
@@ -0,0 +1,9 @@
+# Copyright (c) 2025, Frappe and contributors
+# For license information, please see license.txt
+
+# import frappe
+from frappe.model.document import Document
+
+
+class LMSProgrammingExerciseSubmission(Document):
+	pass
--- a/lms/lms/doctype/lms_programming_exercise_submission/test_lms_programming_exercise_submission.py
+++ b/lms/lms/doctype/lms_programming_exercise_submission/test_lms_programming_exercise_submission.py
@@ -0,0 +1,30 @@
+# Copyright (c) 2025, Frappe and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests import IntegrationTestCase, UnitTestCase
+
+
+# On IntegrationTestCase, the doctype test records and all
+# link-field test record dependencies are recursively loaded
+# Use these module variables to add/remove to/from that list
+EXTRA_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+IGNORE_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+
+
+class UnitTestLMSProgrammingExerciseSubmission(UnitTestCase):
+	"""
+	Unit tests for LMSProgrammingExerciseSubmission.
+	Use this class for testing individual functions and methods.
+	"""
+
+	pass
+
+
+class IntegrationTestLMSProgrammingExerciseSubmission(IntegrationTestCase):
+	"""
+	Integration tests for LMSProgrammingExerciseSubmission.
+	Use this class for testing interactions between multiple components.
+	"""
+
+	pass
--- a/lms/lms/doctype/lms_test_case/init.py
+++ b/lms/lms/doctype/lms_test_case/init.py
--- a/lms/lms/doctype/lms_test_case/lms_test_case.js
+++ b/lms/lms/doctype/lms_test_case/lms_test_case.js
@@ -0,0 +1,8 @@
+// Copyright (c) 2025, Frappe and contributors
+// For license information, please see license.txt
+
+// frappe.ui.form.on("LMS Test Case", {
+// 	refresh(frm) {
+
+// 	},
+// });
--- a/lms/lms/doctype/lms_test_case/lms_test_case.json
+++ b/lms/lms/doctype/lms_test_case/lms_test_case.json
@@ -0,0 +1,45 @@
+{
+ "actions": [],
+ "allow_rename": 1,
+ "creation": "2025-06-18 16:12:10.010416",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "input",
+  "column_break_zkvg",
+  "expected_output"
+ ],
+ "fields": [
+  {
+   "fieldname": "input",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Input"
+  },
+  {
+   "fieldname": "column_break_zkvg",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "expected_output",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Expected Output",
+   "reqd": 1
+  }
+ ],
+ "grid_page_length": 50,
+ "index_web_pages_for_search": 1,
+ "istable": 1,
+ "links": [],
+ "modified": "2025-06-20 12:57:19.186644",
+ "modified_by": "sayali@frappe.io",
+ "module": "LMS",
+ "name": "LMS Test Case",
+ "owner": "Administrator",
+ "permissions": [],
+ "row_format": "Dynamic",
+ "sort_field": "creation",
+ "sort_order": "DESC",
+ "states": []
+}
--- a/lms/lms/doctype/lms_test_case/lms_test_case.py
+++ b/lms/lms/doctype/lms_test_case/lms_test_case.py
@@ -0,0 +1,9 @@
+# Copyright (c) 2025, Frappe and contributors
+# For license information, please see license.txt
+
+# import frappe
+from frappe.model.document import Document
+
+
+class LMSTestCase(Document):
+	pass
--- a/lms/lms/doctype/lms_test_case/test_lms_test_case.py
+++ b/lms/lms/doctype/lms_test_case/test_lms_test_case.py
@@ -0,0 +1,30 @@
+# Copyright (c) 2025, Frappe and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests import IntegrationTestCase, UnitTestCase
+
+
+# On IntegrationTestCase, the doctype test records and all
+# link-field test record dependencies are recursively loaded
+# Use these module variables to add/remove to/from that list
+EXTRA_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+IGNORE_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+
+
+class UnitTestLMSTestCase(UnitTestCase):
+	"""
+	Unit tests for LMSTestCase.
+	Use this class for testing individual functions and methods.
+	"""
+
+	pass
+
+
+class IntegrationTestLMSTestCase(IntegrationTestCase):
+	"""
+	Integration tests for LMSTestCase.
+	Use this class for testing interactions between multiple components.
+	"""
+
+	pass
--- a/lms/lms/doctype/lms_test_case_submission/init.py
+++ b/lms/lms/doctype/lms_test_case_submission/init.py
--- a/lms/lms/doctype/lms_test_case_submission/lms_test_case_submission.json
+++ b/lms/lms/doctype/lms_test_case_submission/lms_test_case_submission.json
@@ -0,0 +1,63 @@
+{
+ "actions": [],
+ "allow_rename": 1,
+ "creation": "2025-06-18 20:05:03.467705",
+ "doctype": "DocType",
+ "editable_grid": 1,
+ "engine": "InnoDB",
+ "field_order": [
+  "input",
+  "expected_output",
+  "column_break_bsjs",
+  "output",
+  "status"
+ ],
+ "fields": [
+  {
+   "fieldname": "input",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Input"
+  },
+  {
+   "fieldname": "expected_output",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Expected Output",
+   "reqd": 1
+  },
+  {
+   "fieldname": "column_break_bsjs",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "output",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Output",
+   "reqd": 1
+  },
+  {
+   "fieldname": "status",
+   "fieldtype": "Select",
+   "in_list_view": 1,
+   "label": "Status",
+   "options": "Passed\nFailed",
+   "reqd": 1
+  }
+ ],
+ "grid_page_length": 50,
+ "index_web_pages_for_search": 1,
+ "istable": 1,
+ "links": [],
+ "modified": "2025-06-24 11:23:13.803159",
+ "modified_by": "sayali@frappe.io",
+ "module": "LMS",
+ "name": "LMS Test Case Submission",
+ "owner": "Administrator",
+ "permissions": [],
+ "row_format": "Dynamic",
+ "sort_field": "creation",
+ "sort_order": "DESC",
+ "states": []
+}
--- a/lms/lms/doctype/lms_test_case_submission/lms_test_case_submission.py
+++ b/lms/lms/doctype/lms_test_case_submission/lms_test_case_submission.py
@@ -0,0 +1,9 @@
+# Copyright (c) 2025, Frappe and contributors
+# For license information, please see license.txt
+
+# import frappe
+from frappe.model.document import Document
+
+
+class LMSTestCaseSubmission(Document):
+	pass
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1504,6 +1504,9 @@ def get_assessments(batch, member=None):
 		elif assessment.assessment_type == "LMS Quiz":
 			assessment = get_quiz_details(assessment, member)

+		elif assessment.assessment_type == "LMS Programming Exercise":
+			assessment = get_exercise_details(assessment, member)
+
 	return assessments


@@ -1576,6 +1579,31 @@ def get_quiz_details(assessment, member):
 	return assessment


+def get_exercise_details(assessment, member):
+	assessment.title = frappe.db.get_value(
+		"LMS Programming Exercise", assessment.assessment_name, "title"
+	)
+	filters = {"member": member, "exercise": assessment.assessment_name}
+
+	if frappe.db.exists("LMS Programming Exercise Submission", filters):
+		assessment.submission = frappe.db.get_value(
+			"LMS Programming Exercise Submission",
+			filters,
+			["name", "status"],
+			as_dict=True,
+		)
+		assessment.completed = True
+		assessment.status = assessment.submission.status
+		assessment.edit_url = (
+			f"/exercises/{assessment.assessment_name}/submission/{assessment.submission.name}"
+		)
+	else:
+		assessment.status = "Not Attempted"
+		assessment.color = "red"
+		assessment.completed = False
+		assessment.edit_url = f"/exercises/{assessment.assessment_name}/submission/new"
+
+
@frappe.whitelist()
 def get_batch_students(batch):
 	students = []
--- a/yarn.lock
+++ b/yarn.lock
@@ -72,7 +72,17 @@
    "@types/tough-cookie" "^4.0.5"
    tough-cookie "^4.1.4"

-"@codemirror/commands@^6.3.0":
+"@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.3.2":
+  version "6.18.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz#de26e864a1ec8192a1b241eb86addbb612964ddb"
+  integrity sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/commands@6.x", "@codemirror/commands@^6.0.0", "@codemirror/commands@^6.3.0":
  version "6.8.1"
  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.8.1.tgz#639f5559d2f33f2582a2429c58cb0c1b925c7a30"
  integrity sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==
@@ -82,6 +92,45 @@
    "@codemirror/view" "^6.27.0"
    "@lezer/common" "^1.1.0"

+"@codemirror/lang-css@^6.0.0":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-css/-/lang-css-6.3.1.tgz#763ca41aee81bb2431be55e3cfcc7cc8e91421a3"
+  integrity sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@lezer/common" "^1.0.2"
+    "@lezer/css" "^1.1.7"
+
+"@codemirror/lang-html@^6.4.9":
+  version "6.4.9"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-6.4.9.tgz#d586f2cc9c341391ae07d1d7c545990dfa069727"
+  integrity sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/lang-css" "^6.0.0"
+    "@codemirror/lang-javascript" "^6.0.0"
+    "@codemirror/language" "^6.4.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/css" "^1.1.0"
+    "@lezer/html" "^1.3.0"
+
+"@codemirror/lang-javascript@^6.0.0", "@codemirror/lang-javascript@^6.2.4":
+  version "6.2.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz#eef2227d1892aae762f3a0f212f72bec868a02c5"
+  integrity sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.6.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/javascript" "^1.0.0"
+
 "@codemirror/lang-json@^6.0.1":
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/@codemirror/lang-json/-/lang-json-6.0.1.tgz#0a0be701a5619c4b0f8991f9b5e95fe33f462330"
@@ -90,7 +139,18 @@
    "@codemirror/language" "^6.0.0"
    "@lezer/json" "^1.0.0"

-"@codemirror/language@^6.0.0", "@codemirror/language@^6.9.2":
+"@codemirror/lang-python@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-python/-/lang-python-6.2.1.tgz#37c9930716110156865a95c548aa0eef5552863a"
+  integrity sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==
+  dependencies:
+    "@codemirror/autocomplete" "^6.3.2"
+    "@codemirror/language" "^6.8.0"
+    "@codemirror/state" "^6.0.0"
+    "@lezer/common" "^1.2.1"
+    "@lezer/python" "^1.1.4"
+
+"@codemirror/language@6.x", "@codemirror/language@^6.0.0", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.8.0", "@codemirror/language@^6.9.2":
  version "6.11.1"
  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.11.1.tgz#7e91a79cd05e278d5782ff9b4cafe8b83a699688"
  integrity sha512-5kS1U7emOGV84vxC+ruBty5sUgcD0te6dyupyRVG2zaSjhTDM73LhVKUtVwiqSe6QwmEoA4SCiU8AKPFyumAWQ==
@@ -102,7 +162,7 @@
    "@lezer/lr" "^1.0.0"
    style-mod "^4.0.0"

-"@codemirror/lint@^6.4.2":
+"@codemirror/lint@^6.0.0", "@codemirror/lint@^6.4.2":
  version "6.8.5"
  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.8.5.tgz#9edaa808e764e28e07665b015951934c8ec3a418"
  integrity sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==
@@ -111,7 +171,16 @@
    "@codemirror/view" "^6.35.0"
    crelt "^1.0.5"

-"@codemirror/state@^6.0.0", "@codemirror/state@^6.3.1", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0":
+"@codemirror/search@^6.0.0":
+  version "6.5.11"
+  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.11.tgz#a324ffee36e032b7f67aa31c4fb9f3e6f9f3ed63"
+  integrity sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
+"@codemirror/state@6.x", "@codemirror/state@^6.0.0", "@codemirror/state@^6.3.1", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0":
  version "6.5.2"
  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.5.2.tgz#8eca3a64212a83367dc85475b7d78d5c9b7076c6"
  integrity sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==
@@ -128,7 +197,7 @@
    "@codemirror/view" "^6.0.0"
    "@lezer/highlight" "^1.0.0"

-"@codemirror/view@^6.0.0", "@codemirror/view@^6.22.0", "@codemirror/view@^6.23.0", "@codemirror/view@^6.27.0", "@codemirror/view@^6.35.0":
+"@codemirror/view@6.x", "@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.22.0", "@codemirror/view@^6.23.0", "@codemirror/view@^6.27.0", "@codemirror/view@^6.35.0":
  version "6.37.2"
  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.37.2.tgz#fe576641a2e809a50946567cd2b528c86f22b885"
  integrity sha512-XD3LdgQpxQs5jhOOZ2HRVT+Rj59O4Suc7g2ULvZ+Yi8eCkickrkZ5JFuoDhs2ST1mNI5zSsNYgR3NGa4OUrbnw==
@@ -591,18 +660,45 @@
  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.4.tgz#4d4ff677e1609214fc71c580125ddddd86abcabf"
  integrity sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==

-"@lezer/common@^1.0.0", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0":
+"@lezer/common@^1.0.0", "@lezer/common@^1.0.2", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0", "@lezer/common@^1.2.1":
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.3.tgz#138fcddab157d83da557554851017c6c1e5667fd"
  integrity sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==

-"@lezer/highlight@^1.0.0":
+"@lezer/css@^1.1.0", "@lezer/css@^1.1.7":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@lezer/css/-/css-1.2.1.tgz#b35f6d0459e9be4de1cdf4d3132a59efd7cf2ba3"
+  integrity sha512-2F5tOqzKEKbCUNraIXc0f6HKeyKlmMWJnBB0i4XW6dJgssrZO/YlZ2pY5xgyqDleqqhiNJ3dQhbrV2aClZQMvg==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.3.0"
+
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.2.1.tgz#596fa8f9aeb58a608be0a563e960c373cbf23f8b"
  integrity sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==
  dependencies:
    "@lezer/common" "^1.0.0"

+"@lezer/html@^1.3.0":
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/@lezer/html/-/html-1.3.10.tgz#1be9a029a6fe835c823b20a98a449a630416b2af"
+  integrity sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/javascript@^1.0.0":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-1.5.1.tgz#2a424a6ec29f1d4ef3c34cbccc5447e373618ad8"
+  integrity sha512-ATOImjeVJuvgm3JQ/bpo2Tmv55HSScE2MTPnKRMRIPx2cLhHGyX2VnqpHhtIV1tVzIjZDbcWQm+NCTF40ggZVw==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.1.3"
+    "@lezer/lr" "^1.3.0"
+
 "@lezer/json@^1.0.0":
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/@lezer/json/-/json-1.0.3.tgz#e773a012ad0088fbf07ce49cfba875cc9e5bc05f"
@@ -612,13 +708,22 @@
    "@lezer/highlight" "^1.0.0"
    "@lezer/lr" "^1.0.0"

-"@lezer/lr@^1.0.0":
+"@lezer/lr@^1.0.0", "@lezer/lr@^1.3.0":
  version "1.4.2"
  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.4.2.tgz#931ea3dea8e9de84e90781001dae30dea9ff1727"
  integrity sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==
  dependencies:
    "@lezer/common" "^1.0.0"

+"@lezer/python@^1.1.4":
+  version "1.1.18"
+  resolved "https://registry.yarnpkg.com/@lezer/python/-/python-1.1.18.tgz#fa02fbf492741c82dc2dc98a0a042bd0d4d7f1d3"
+  integrity sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
 "@marijn/find-cluster-break@^1.0.0":
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz#775374306116d51c0c500b8c4face0f9a04752d8"
@@ -1932,18 +2037,18 @@ clone@^1.0.2:
  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==

-codemirror-editor-vue3@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/codemirror-editor-vue3/-/codemirror-editor-vue3-2.8.0.tgz#5d7e3c8bc1fac88e64f349fa03f8aac2e6b7a845"
-  integrity sha512-ebYGNhBpLmQNLguXzNyMMkn6K8v3lcS5/Ncvdn6YS4bLGEHE67MfsJIS/WV0L7I6WavUuFlY/Rs/AJKChIwSwg==
+codemirror@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
+  integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
  dependencies:
-    codemirror "^5"
-    diff-match-patch "^1.0.5"
-
-codemirror@^5:
-  version "5.65.19"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.19.tgz#71016c701d6a4b6e1982b0f6e7186be65e49653d"
-  integrity sha512-+aFkvqhaAVr1gferNMuN8vkTSrWIFvzlMV9I2KBLCWS2WpZ2+UAkZjlMZmEuT+gcXTi6RrGQCkWq1/bDtGqhIA==
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/commands" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/search" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"

 color-convert@^2.0.1:
  version "2.0.1"
@@ -2265,11 +2370,6 @@ didyoumean@^1.2.2:
  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==

-diff-match-patch@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
-  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
-
 dir-glob@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -4940,6 +5040,11 @@ tailwindcss@^3.2.7:
    resolve "^1.22.8"
    sucrase "^3.35.0"

+thememirror@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/thememirror/-/thememirror-2.0.1.tgz#ae9eb4ce7e8d0303d4fbabcc860ed38a0b45b079"
+  integrity sha512-d5i6FVvWWPkwrm4cHLI3t9AT1OrkAt7Ig8dtdYSofgF7C/eiyNuq6zQzSTusWTde3jpW9WLvA9J/fzNKMUsd0w==
+
 thenify-all@^1.0.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
@@ -5320,6 +5425,16 @@ vue-chartjs@^5.3.0:
  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-5.3.2.tgz#c0f2009af6b08845af158ddee9d0a68d9dae631b"
  integrity sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==

+vue-codemirror@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/vue-codemirror/-/vue-codemirror-6.1.1.tgz#246697ef4cfa6b2448dd592ade214bb7ff86611f"
+  integrity sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==
+  dependencies:
+    "@codemirror/commands" "6.x"
+    "@codemirror/language" "6.x"
+    "@codemirror/state" "6.x"
+    "@codemirror/view" "6.x"
+
 vue-demi@>=0.13.0, vue-demi@>=0.14.8, vue-demi@^0.14.10:
  version "0.14.10"
  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"