feat: timer in quiz
This commit is contained in:
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user