feat: user input quiz portal form

lms/www/batch/learn.js

@@ -35,6 +35,7 @@ frappe.ready(() => {
 	});
 
 	$("#summary").click((e) => {
+		add_to_local_storage();
 		quiz_summary(e);
 	});
 
@@ -247,7 +248,7 @@ const parse_options = () => {
 };
 
 const is_answer_correct = (type, element) => {
-	let answer = type == "Choices" ? decodeURIComponent($(element).val()) : "";
+	let answer = decodeURIComponent($(element).val());
 
 	frappe.call({
 		async: false,
@@ -260,7 +261,7 @@ const is_answer_correct = (type, element) => {
 		callback: (data) => {
 			type == "Choices"
 				? parse_choices(element, data.message)
-				: parse_possible_answers(e);
+				: parse_possible_answers(element, data.message);
 		},
 	});
 };
@@ -278,9 +279,27 @@ const parse_choices = (element, correct) => {
 	}
 };
 
-const parse_possible_answers = () => {
+const parse_possible_answers = (element, correct) => {
 	self.answer.push(decodeURIComponent($(element).val()));
-	correct ? self.is_correct.push(1) : self.is_correct.push(0);
+	if (correct) {
+		self.is_correct.push(1);
+		show_indicator("success", element);
+	} else {
+		self.is_correct.push(0);
+		show_indicator("failure", element);
+	}
+};
+
+const show_indicator = (class_name, element) => {
+	let label = class_name == "success" ? "Correct" : "Incorrect";
+	let icon =
+		class_name == "success" ? "#icon-solid-success" : "#icon-solid-error";
+	$(`<div class="answer-indicator ${class_name}">
+			<svg class="icon icon-md">
+				<use href=${icon}>
+			</svg>
+			<span style="font-weight: 500">${__(label)}</span>
+		</div>`).insertAfter(element);
 };
 
 const add_icon = (element, icon) => {
@@ -292,7 +311,6 @@ const add_icon = (element, icon) => {
             ${label}
         </div>
     `);
-	//$(element).parent().empty().html(`<div class="option-text"><img class="mr-3" src="/assets/lms/icons/${icon}.svg"> ${label}</div>`);
 };
 
 const add_to_local_storage = () => {
@@ -308,6 +326,9 @@ const add_to_local_storage = () => {
 
 	quiz_stored ? quiz_stored.push(quiz_obj) : (quiz_stored = [quiz_obj]);
 	localStorage.setItem(quiz_name, JSON.stringify(quiz_stored));
+
+	self.answer = [];
+	self.is_correct = [];
 };
 
 const create_certificate = (e) => {

lms/www/batch/quiz.html

@@ -37,8 +37,16 @@
         <div contenteditable="true" data-placeholder="{{ _('Question') }}" data-question="{{ question.name }}"
         class="question mb-4">{% if question.question %} {{ question.question }} {% endif %}</div>
 
+        <select type="text" value="{{ question.type }}" class="input-with-feedback form-control ellipsis type" maxlength="140" data-fieldtype="Select" data-fieldname="type" placeholder="" data-doctype="LMS Quiz Question">
+            {% for option in ["Choices", "User Input"] %}
+            <option value="{{ option }}" {% if question.type == option %} selected {% endif %} > {{ _(option) }} </option>
+            {% endfor %}
+        </select>
+
         {% for i in range(1,5) %}
         {% set num = frappe.utils.cstr(i) %}
+
+        {% if question.type == "Choices" %}
         {% set option = question["option_" + num] %}
         {% set explanation = question["explanation_" + num] %}
 
@@ -57,6 +65,19 @@
                 </div>
             </div>
         </div>
+
+        {% else %}
+        {% set possible_answer = question["possibility_" + num] %}
+
+        <div class="mt-4">
+            <label class=""> {{ _("Possible Answer") }} {{ num }} </label>
+            <div class="control-input-wrapper">
+                <div class="control-input">
+                    <div contenteditable="true" class="input-with-feedback form-control bold possibility-{{ num }}" style="height: 100px;" spellcheck="false">{% if possible_answer %}{{possible_answer}}{% endif %}</div>
+                </div>
+            </div>
+        </div>
+        {% endif %}
         {% endfor %}
     </div>
     {% endfor %}

lms/www/batch/quiz.js

@@ -93,36 +93,41 @@ const get_questions = () => {
 
 		let details = {};
 		let correct_options = 0;
+		let possibilities = 0;
+
 		details["question"] = $(el).find(".question").text();
 		details["question_name"] =
 			$(el).find(".question").data("question") || "";
+		details["type"] = $(el).find(".type").val();
 
 		Array.from({ length: 4 }, (x, i) => {
 			let num = i + 1;
 
-			details[`option_${num}`] = $(el)
-				.find(`.option-${num} .option-input:first`)
-				.text();
-			details[`explanation_${num}`] = $(el)
-				.find(`.option-${num} .option-input:last`)
-				.text();
+			if (details.type == "Choices") {
+				details[`option_${num}`] = $(el)
+					.find(`.option-${num} .option-input:first`)
+					.text();
+				details[`explanation_${num}`] = $(el)
+					.find(`.option-${num} .option-input:last`)
+					.text();
 
-			let is_correct = $(el)
-				.find(`.option-${num} .option-checkbox`)
-				.find("input")
-				.prop("checked");
-			if (is_correct) correct_options += 1;
+				let is_correct = $(el)
+					.find(`.option-${num} .option-checkbox`)
+					.find("input")
+					.prop("checked");
+				if (is_correct) correct_options += 1;
 
-			details[`is_correct_${num}`] = is_correct;
+				details[`is_correct_${num}`] = is_correct;
+			} else {
+				let possible_answer = $(el)
+					.find(`.possibility-${num}`)
+					.text()
+					.trim();
+				if (possible_answer) possibilities += 1;
+				details[`possibility_${num}`] = possible_answer;
+			}
 		});
-
-		if (!details["option_1"] || !details["option_2"])
-			frappe.throw(__("Each question must have at least two options."));
-
-		if (!correct_options)
-			frappe.throw(
-				__("Each question must have at least one correct option.")
-			);
+		validate_mandatory(details, correct_options, possibilities);
 
 		details["multiple"] = correct_options > 1 ? 1 : 0;
 		questions.push(details);
@@ -131,6 +136,26 @@ const get_questions = () => {
 	return questions;
 };
 
+const validate_mandatory = (details, correct_options, possibilities) => {
+	if (details["type"] == "Choices") {
+		if (!details["option_1"] || !details["option_2"])
+			frappe.throw(__("Each question must have at least two options."));
+
+		if (!correct_options)
+			frappe.throw(
+				__(
+					"Question with choices must have at least one correct option."
+				)
+			);
+	} else if (!possibilities) {
+		frappe.throw(
+			__(
+				"Question with user input must have at least one possible answer."
+			)
+		);
+	}
+};
+
 const scroll_to_question_container = () => {
 	$([document.documentElement, document.body]).animate(
 		{

lms/www/batch/quiz.py

@@ -9,11 +9,12 @@ def get_context(context):
 		context.quiz = frappe._dict()
 		context.quiz.edit_mode = 1
 	else:
-		fields_arr = ["name", "question"]
+		fields_arr = ["name", "question", "type"]
 		for num in range(1, 5):
 			fields_arr.append("option_" + cstr(num))
 			fields_arr.append("is_correct_" + cstr(num))
 			fields_arr.append("explanation_" + cstr(num))
+			fields_arr.append("possibility_" + cstr(num))
 
 		context.quiz = frappe.db.get_value("LMS Quiz", quizname, ["title", "name"], as_dict=1)
 		context.quiz.questions = frappe.get_all(