forked from muyrety/Smarter
108 lines
4.8 KiB
Django/Jinja
108 lines
4.8 KiB
Django/Jinja
{% extends "browsing.j2" %}
|
|
|
|
{% block title %} Select questions {% endblock %}
|
|
|
|
{% block after_bootstrap_js %}
|
|
<script type="module" src="{{ url_for('static', filename='js/otdb_browse.js') }}"></script>
|
|
<script type="module" src="{{ url_for('static', filename='js/select_otdb_questions.js') }}"></script>
|
|
{% endblock %}
|
|
|
|
{% block header %}
|
|
<div id="tooManyRequestsModal" class="modal fade" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content bg-info-subtle text-success border-success-subtle">
|
|
<div class="modal-header border-success-subtle">
|
|
<h5 class="modal-title">Too many requests</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>You have made too many question requests. Please wait at least 5 seconds between requests.</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-center border-success-subtle">
|
|
<button type="button" class="btn btn-outline-success" data-bs-dismiss="modal">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="unexpectedErrorModal" class="modal fade" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content bg-info-subtle text-success border-success-subtle">
|
|
<div class="modal-header border-success-subtle">
|
|
<h5 class="modal-title">Unexpected error</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>An unexpected error has occured. Please refresh the page.</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-center border-success-subtle">
|
|
<button type="button" class="btn btn-outline-success" data-bs-dismiss="modal">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="serverErrorModal" class="modal fade" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content bg-info-subtle text-success border-success-subtle">
|
|
<div class="modal-header border-success-subtle">
|
|
<h5 class="modal-title">Server error</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>There has been an error while contacting the server, try again later</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-center border-success-subtle">
|
|
<button type="button" class="btn btn-outline-success" data-bs-dismiss="modal">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-5">
|
|
<div id="notEnoughQuestions" class="d-none mt-3 alert bg-info-subtle border-success-subtle alert-dismissible">
|
|
<p class="text-success"> All question sets must have at least 5 questions </p>
|
|
<button type="button" class="btn-close" id="notEnoughQuestionsDismiss"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-5">
|
|
<div id="tooManyQuestions" class="d-none mt-3 alert bg-info-subtle border-success-subtle alert-dismissible">
|
|
<p class="text-success"> All question sets must have no more than 50 questions </p>
|
|
<button type="button" class="btn-close" id="tooManyQuestionsDismiss"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-3">
|
|
<button class="btn btn-primary" id="submitSet">Submit question set</button>
|
|
</div>
|
|
|
|
|
|
<div class="row justify-content-center mt-3">
|
|
<div class="col-lg-4 col-md-5 m-2 text-center">
|
|
<button class="btn btn-outline-primary" disabled>Open Trivia DB questions</button>
|
|
<a href="{{ url_for('about.opentdb') }}" class="link-offset-2 text-primary-emphasis ms-1">?</a>
|
|
</div>
|
|
<div class="col-lg-4 col-md-5 m-2 text-center">
|
|
<a href="{{ url_for('question_sets.add_user_generated') }}" class="btn btn-primary">User-created questions</a>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block table %}
|
|
<table id="questionTable" class="table table-info border-primary-subtle mt-3">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="text-primary-emphasis">Category</th>
|
|
<th scope="col" class="text-primary-emphasis">Difficulty</th>
|
|
<th scope="col" class="text-primary-emphasis">Question</th>
|
|
<th scope="col" id="selectIndicator" class="text-primary-emphasis invisible">Select</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
<div class="text-center">
|
|
<button class="btn btn-outline-primary mb-3" id="loadQuestions">Load more</button>
|
|
<p class="d-none text-primary-emphasis" id="endReached">You have reached the end</p>
|
|
</div>
|
|
{% endblock %}
|