feat: negative marking in quiz

frontend/src/components/Modals/Question.vue

@@ -2,7 +2,7 @@
 	<Dialog
 		v-model="show"
 		:options="{
-			size: '3xl',
+			size: '5xl',
 		}"
 	>
 		<template #body>
@@ -21,7 +21,7 @@
 						class="!p-0"
 					/>
 				</div>
-				<div v-if="!chooseFromExisting || editMode" class="space-y-2">
+				<div v-if="!chooseFromExisting || editMode">
 					<div>
 						<label class="block text-xs text-ink-gray-5 mb-1">
 							{{ __('Question') }}
@@ -34,7 +34,7 @@
 							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 						/>
 					</div>
-					<div class="grid grid-cols-2 gap-4">
+					<div class="grid grid-cols-2 gap-8 mt-4">
 						<FormControl
 							v-model="question.marks"
 							:label="__('Marks')"
@@ -51,7 +51,7 @@
 					</div>
 					<div
 						v-if="question.type == 'Choices'"
-						class="text-base font-semibold text-ink-gray-9 mb-5 mt-5"
+						class="text-base font-semibold text-ink-gray-9 mb-5 mt-10"
 					>
 						{{ __('Options') }}
 					</div>
@@ -61,7 +61,10 @@
 					>
 						{{ __('Possibilities') }}
 					</div>
-					<div v-if="question.type == 'Choices'" class="grid grid-cols-2 gap-4">
+					<div
+						v-if="question.type == 'Choices'"
+						class="grid grid-cols-2 gap-x-8 gap-y-4"
+					>
 						<div v-for="n in 4" class="space-y-4 py-2">
 							<FormControl
 								:label="__('Option') + ' ' + n"
@@ -81,7 +84,7 @@
 					</div>
 					<div
 						v-else-if="question.type == 'User Input'"
-						class="grid grid-cols-2 gap-4 py-2"
+						class="grid grid-cols-2 gap-x-8 gap-y-4 py-2"
 					>
 						<div v-for="n in 4">
 							<FormControl
@@ -106,7 +109,7 @@
 				</div>
 				<div class="flex items-center justify-end space-x-2 mt-5">
 					<Button variant="solid" @click="submitQuestion()">
-						{{ __('Submit') }}
+						{{ __('Save') }}
 					</Button>
 				</div>
 			</div>
@@ -217,7 +220,7 @@ const questionRow = createResource({
 		return {
 			doc: {
 				doctype: 'LMS Quiz Question',
-				parent: quiz.value.data.name,
+				parent: quiz.value.doc.name,
 				parentfield: 'questions',
 				parenttype: 'LMS Quiz',
 				...values,

frontend/src/components/Quiz.vue

@@ -1,7 +1,7 @@
 <template>
 	<div v-if="quiz.data">
 		<div
-			class="bg-surface-blue-2 space-y-1 py-2 px-2 mb-4 rounded-md text-sm text-ink-blue-3 leading-5"
+			class="bg-surface-blue-2 space-y-2 py-2 px-3 mb-4 rounded-md text-sm text-ink-blue-2 leading-5"
 		>
 			<div v-if="inVideo">
 				{{ __('You will have to complete the quiz to continue the video') }}
@@ -41,6 +41,16 @@
 					)
 				}}
 			</div>
+			<div v-if="quiz.data.enable_negative_marking" class="leading-5">
+				{{
+					__(
+						'If you answer incorrectly, {0} {1} will be deducted from your score for each incorrect answer.'
+					).format(
+						quiz.data.marks_to_cut,
+						quiz.data.marks_to_cut == 1 ? 'mark' : 'marks'
+					)
+				}}
+			</div>
 		</div>
 
 		<div v-if="quiz.data.duration" class="flex flex-col space-x-1 my-4">