feat: timer in quiz

This commit is contained in:
Jannat Patel
2022-05-17 11:52:10 +05:30
parent 4fb2241621
commit c9b50e7db6
5 changed files with 150 additions and 53 deletions

View File

@@ -1,18 +1,34 @@
{% if attempts_exceeded %}
<div class="common-card-style text-center p-5" style="flex-direction: column;">
<div id="quiz-title" class="font-weight-bold mb-4" style="font-size: var(--text-lg);">{{ quiz.title }}</div>
<div> {{ _("You have already exceeded the maximum number of attempts allowed for this quiz.") }} </div>
<div> {{ _("You latest score is {0}.").format(last_attempt_score) }} </div>
</div>
{% else %}
<div id="quiz-title" class="hide">{{ quiz.title }}</div>
<div class="common-card-style question-card">
<form id="quiz-form">
<div id="start-banner" class="text-center">
<div class="font-weight-bold mb-4" style="font-size: var(--text-lg);"> {{ quiz.title }} </div>
<div> {{ _("This quiz has {0} questions.").format(quiz.questions | length) }} </div>
{% if quiz.time %}
<div> {{ _("This is a time bound quiz. You will have {0} seconds per question.").format(quiz.time) }} </div>
{% endif %}
<div class="btn btn-primary btn-start-quiz"> {{ _("Start") }} </div>
</div>
<form id="quiz-form" class="hide">
<div class="questions">
{% for question in quiz.questions %}
{% set instruction = _("Choose all answers that apply") if question.multiple else _("Choose 1 answer") %}
<div class="question {% if loop.index == 1 %} active-question {% else %} hide {% endif %}"
data-question="{{ question.question }}" data-multi="{{ question.multiple}}" data-qt-index="{{ loop.index }}">
<div class="question hide"
data-question="{{ question.question }}" data-multi="{{ question.multiple }}" data-qt-index="{{ loop.index }}">
<div class="question-header">
<div class="question-number">{{ loop.index }}</div>
<div class="question-text">
<div class="course-meta pull-right ml-2"> {{ instruction }} </div>
{{ frappe.utils.md_to_html(question.question) }}
</div>
<div class="question-number">{{ loop.index }}</div>
<div class="question-text">
{{ frappe.utils.md_to_html(question.question) }}
</div>
<div class="course-meta"> {{ instruction }} </div>
</div>
{% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %}
@@ -40,15 +56,26 @@
</div>
{% endfor %}
</div>
<div class="quiz-footer">
<span class="font-weight-bold"> <span class="current-question">1</span> of {{ quiz.questions | length }}</span>
<button class="button pull-right is-default" id="check" disabled>{{ _("Check") }}</button>
<div class="button is-secondary hide" id="next">{{ _("Next Question") }}</div>
<div class="button is-secondary is-default hide" id="summary">{{ _("Summary") }}</div>
<small id="submission-message" class="font-weight-bold hide"> {{ _("Please join the course to submit the Quiz.") }} </small>
<div class="button is-secondary hide" id="try-again">{{ _("Try Again") }}</div>
<span class="font-weight-bold"> <span class="current-question">1</span> of {{ quiz.questions | length }}</span>
{% if quiz.time %}
<div class="progress timer w-75" data-time="{{ quiz.time }}">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
{% endif %}
<button class="button pull-right is-default" id="check" disabled>{{ _("Check") }}</button>
<div class="button is-secondary hide" id="next">{{ _("Next Question") }}</div>
<div class="button is-secondary is-default hide" id="summary">{{ _("Summary") }}</div>
<small id="submission-message" class="font-weight-bold hide"> {{ _("Please join the course to submit the Quiz.") }} </small>
<div class="button is-secondary hide" id="try-again">{{ _("Try Again") }}</div>
</div>
<h4 class="success-message"></h4>
<h5 class="score text-muted"></h5>
</form>
</div>
{% endif %}