feat: programming exercise submission
This commit is contained in:
Jannat Patel
156
frontend/src/components/Controls/Code.vue
Normal file
156
frontend/src/components/Controls/Code.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<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) => {
|
||||
console.log('newVal', 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>
|
||||
@@ -1,2 +1,3 @@
|
||||
@import './assets/Inter/inter.css';
|
||||
@import 'frappe-ui/src/style.css';
|
||||
@import './styles/codemirror.css';
|
||||
@@ -1,44 +0,0 @@
|
||||
<template>
|
||||
{{ exercise }}
|
||||
<Button @click="runCode"> Run Code </Button>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Button, createDocumentResource } from 'frappe-ui'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
exerciseID: string
|
||||
}>()
|
||||
|
||||
onMounted(() => {
|
||||
loadFalcon()
|
||||
})
|
||||
|
||||
const exercise = createDocumentResource({
|
||||
doctype: 'LMS Exercise',
|
||||
name: props.exerciseID,
|
||||
fields: ['name', 'title', 'description'],
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const loadFalcon = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script')
|
||||
script.src = 'https://falcon.frappe.io/static/livecode.js'
|
||||
script.onload = resolve
|
||||
script.onerror = reject
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
}
|
||||
|
||||
const runCode = () => {
|
||||
var session = new LiveCodeSession({
|
||||
base_url: 'https://falcon.frappe.io',
|
||||
runtime: 'python',
|
||||
code: "print('hello, world!')",
|
||||
onMessage: function (msg: any) {
|
||||
console.log(msg)
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,307 @@
|
||||
<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="grid grid-cols-2 h-[calc(100vh_-_3rem)]">
|
||||
<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 border-r px-5 py-2 h-full"
|
||||
></div>
|
||||
<div>
|
||||
<div class="flex items-center justify-between p-2 bg-surface-gray-1">
|
||||
<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 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="python"
|
||||
height="400px"
|
||||
maxHeight="1000px"
|
||||
/>
|
||||
<span v-if="error" class="text-xs text-ink-gray-5 px-2">
|
||||
{{ __('Compiler Error') }}:
|
||||
</span>
|
||||
<textarea
|
||||
v-if="error"
|
||||
v-model="errorMessage"
|
||||
class="bg-surface-gray-1 border-none text-sm h-28 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" v-if="testCases.length" class="p-3">
|
||||
<span class="text-lg font-semibold text-ink-gray-9">
|
||||
{{ __('Test Cases') }}
|
||||
</span>
|
||||
<div class="divide-y mt-5">
|
||||
<div
|
||||
v-for="(testCase, index) in testCases"
|
||||
:key="testCase.input"
|
||||
class="py-3"
|
||||
>
|
||||
<div class="flex items-center mb-5">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Badge,
|
||||
Breadcrumbs,
|
||||
Button,
|
||||
call,
|
||||
createDocumentResource,
|
||||
toast,
|
||||
usePageMeta,
|
||||
} from 'frappe-ui'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { Play, X, Check } from 'lucide-vue-next'
|
||||
import { sessionStore } from '@/stores/session'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
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<
|
||||
Array<{
|
||||
input: string
|
||||
output: string
|
||||
expected_output: string
|
||||
status: string
|
||||
}>
|
||||
>([])
|
||||
const boilerplate = ref<string>(
|
||||
`with open("stdin", "r") as f:\n data = f.read()\n\ninputs = data.split()\n\n# inputs is a list of strings\n# write your code below\n\n`
|
||||
)
|
||||
const { brand } = sessionStore()
|
||||
const router = useRouter()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
exerciseID: string
|
||||
submissionID?: string
|
||||
}>(),
|
||||
{
|
||||
submissionID: 'new',
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
loadFalcon()
|
||||
if (props.submissionID != 'new') {
|
||||
submission.reload()
|
||||
}
|
||||
if (!code.value) {
|
||||
code.value = boilerplate.value
|
||||
}
|
||||
})
|
||||
|
||||
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,
|
||||
cache: ['programmingExerciseSubmission', props.submissionID],
|
||||
})
|
||||
|
||||
watch(
|
||||
() => submission.doc,
|
||||
(doc) => {
|
||||
if (doc) {
|
||||
code.value = `${boilerplate.value}${doc.code || ''}\n`
|
||||
testCases.value = doc.test_cases || []
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const loadFalcon = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script')
|
||||
script.src = 'https://falcon.frappe.io/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 },
|
||||
})
|
||||
} else {
|
||||
submission.reload()
|
||||
}
|
||||
toast.success(__('Submitted successfully!'))
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.error('Error creating submission:', error)
|
||||
toast.error(
|
||||
__('Failed to submit. Please try again. {0}').format({ error })
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const execute = async (stdin = '') => {
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
let outputChunks: string[] = []
|
||||
|
||||
const session = new LiveCodeSession({
|
||||
base_url: 'https://falcon.frappe.io',
|
||||
runtime: 'python',
|
||||
code: code.value,
|
||||
files: [{ filename: 'stdin', contents: stdin }],
|
||||
onMessage: (msg: any) => {
|
||||
console.log(msg)
|
||||
|
||||
if (msg.msgtype === 'write' && msg.file === 'stdout') {
|
||||
outputChunks.push(msg.data)
|
||||
}
|
||||
|
||||
if (msg.msgtype == 'exitstatus') {
|
||||
if (msg.exitstatus != 0) {
|
||||
error.value = true
|
||||
} else {
|
||||
error.value = false
|
||||
}
|
||||
}
|
||||
|
||||
if (msg.msgtype === 'exitstatus') {
|
||||
resolve(outputChunks.join(''))
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
setTimeout(() => reject('Execution timed out.'), 10000)
|
||||
})
|
||||
}
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
return [
|
||||
{ label: __('Programming Exercises') },
|
||||
{ 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>
|
||||
@@ -215,6 +215,37 @@ const routes = [
|
||||
name: 'PersonaForm',
|
||||
component: () => import('@/pages/PersonaForm.vue'),
|
||||
},
|
||||
{
|
||||
path: '/exercises',
|
||||
name: 'ProgrammingExercises',
|
||||
component: () =>
|
||||
import('@/pages/ProgrammingExercises/ProgrammingExercises.vue'),
|
||||
},
|
||||
{
|
||||
path: '/exercises/:exerciseID',
|
||||
name: 'ProgrammingExerciseForm',
|
||||
component: () =>
|
||||
import('@/pages/ProgrammingExercises/ProgrammingExerciseForm.vue'),
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: '/exercises/:exerciseID/submissions',
|
||||
name: 'ProgrammingExerciseSubmissions',
|
||||
component: () =>
|
||||
import(
|
||||
'@/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue'
|
||||
),
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: '/exercises/:exerciseID/submission/:submissionID',
|
||||
name: 'ProgrammingExerciseSubmission',
|
||||
component: () =>
|
||||
import(
|
||||
'@/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue'
|
||||
),
|
||||
props: true,
|
||||
},
|
||||
]
|
||||
|
||||
let router = createRouter({
|
||||
|
||||
65
frontend/src/styles/codemirror.css
Normal file
65
frontend/src/styles/codemirror.css
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user