eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: new question with possible answers

Browse Source
This commit is contained in:
Jannat Patel
2023-03-27 12:53:14 +05:30
parent b37f259804
commit a0e6462c13
2 changed files with 63 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lms/www/batch/quiz.html
View File

@@ -37,7 +37,7 @@
<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">
<select 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 %}
@@ -46,11 +46,10 @@
{% 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] %}
<div class="mt-4">
<div class="option-group mt-4 {% if question.type == 'User Input' %} hide {% endif %} ">
<label class=""> {{ _("Option") }} {{ num }} </label>
<div class="d-flex justify-content-between option-{{ num }}">
<div contenteditable="true" data-placeholder="{{ _('Option') }}"
@@ -66,10 +65,9 @@
</div>
</div>
{% else %}
{% set possible_answer = question["possibility_" + num] %}
<div class="mt-4">
<div class="possibility-group mt-4 {% if question.type == 'Choices' %} hide {% endif %}">
<label class=""> {{ _("Possible Answer") }} {{ num }} </label>
<div class="control-input-wrapper">
<div class="control-input">
@@ -77,7 +75,6 @@
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endfor %}

75
lms/www/batch/quiz.js
View File

@@ -15,15 +15,25 @@ frappe.ready(() => {
frappe.utils.copy_to_clipboard($(e.currentTarget).data("name"));
});
$(document).on("change", ".type", function () {
toggle_form($(this));
});
get_questions();
});
const add_question = () => {
/* if ($(".new-quiz-card").length) {
scroll_to_question_container();
return;
} */
const toggle_form = (el) => {
let type = el.val();
if (type === "Choices") {
el.siblings(".option-group").removeClass("hide");
el.siblings(".possibility-group").addClass("hide");
} else if (type === "User Input") {
el.siblings(".option-group").addClass("hide");
el.siblings(".possibility-group").removeClass("hide");
}
};
const add_question = () => {
let add_after = $(".quiz-card").length
? $(".quiz-card:last")
: $("#quiz-title");
@@ -31,7 +41,11 @@ const add_question = () => {
<div contenteditable="true" data-placeholder="${__(
"Question"
)}" class="question mb-4"></div>
</div>`;
<select 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">
<option value="Choices"> ${__("Choices")} </option>
<option value="User Input"> ${__("User Input")} </option>
</select>
</div>`;
$(question_template).insertAfter(add_after);
get_question_template();
$(".btn-save-question").removeClass("hide");
@@ -40,11 +54,31 @@ const add_question = () => {
const get_question_template = () => {
Array.from({ length: 4 }, (x, num) => {
let option_template = get_option_template(num + 1);
let add_after = $(".quiz-card:last .option-group").length
? $(".quiz-card:last .option-group").last()
: $(".question:last");
: $(".type:last");
question_template = $(option_template).insertAfter(add_after);
});
Array.from({ length: 4 }, (x, num) => {
let possibility_template = get_possibility_template(num + 1);
let add_after = $(".quiz-card:last .possibility-group").length
? $(".quiz-card:last .possibility-group").last()
: $(".quiz-card:last .option-group:last");
question_template = $(possibility_template).insertAfter(add_after);
});
};
const get_possibility_template = (num) => {
return `<div class="possibility-group mt-4 hide">
<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"></div>
</div>
</div>
</div>`;
};
const get_option_template = (num) => {
@@ -95,6 +129,7 @@ const get_questions = () => {
let correct_options = 0;
let possibilities = 0;
details["element"] = el;
details["question"] = $(el).find(".question").text();
details["question_name"] =
$(el).find(".question").data("question") || "";
@@ -138,16 +173,21 @@ const get_questions = () => {
const validate_mandatory = (details, correct_options, possibilities) => {
if (details["type"] == "Choices") {
if (!details["option_1"] || !details["option_2"])
if (!details["option_1"] || !details["option_2"]) {
scroll_to_element(details["element"]);
frappe.throw(__("Each question must have at least two options."));
}
if (!correct_options)
if (!correct_options) {
scroll_to_element(details["element"]);
frappe.throw(
__(
"Question with choices must have at least one correct option."
)
);
}
} else if (!possibilities) {
scroll_to_element(details["element"]);
frappe.throw(
__(
"Question with user input must have at least one possible answer."
@@ -157,11 +197,16 @@ const validate_mandatory = (details, correct_options, possibilities) => {
};
const scroll_to_question_container = () => {
$([document.documentElement, document.body]).animate(
{
scrollTop: $(".new-quiz-card").offset().top,
},
1000
);
scroll_to_element(".new-quiz-card:last");
$(".new-quiz-card").find(".question").focus();
};
const scroll_to_element = (element) => {
if ($(element).length)
$([document.documentElement, document.body]).animate(
{
scrollTop: $(element).offset().top,
},
1000
);
};