improve case quesitons
This commit is contained in:
Ross
@@ -5,7 +5,33 @@
|
||||
{% block content %}
|
||||
<h2>{{case_detail.collection.name}} / {{case_detail.case.pk}}</h2>
|
||||
|
||||
<p>See https://django-jsonform.readthedocs.io/en/latest/guide/inputs.html for formatting</p>
|
||||
<p>Collection: <a href="{% url 'atlas:collection_detail' case_detail.collection.pk %}">{{case_detail.collection.name}}</a>, Case: <a href="{% url 'atlas:case_detail' case_detail.case.pk %}">{{case_detail.case.title}}</a></p>
|
||||
|
||||
<p>This form allows you to add questions to a case. A example of how the quesiton will be displayed is shown below.</p>
|
||||
<p>If answers are supplied the question will be automarked</p>
|
||||
|
||||
<p>See https://django-jsonform.readthedocs.io/en/latest/guide/inputs.html for formatting</p>
|
||||
|
||||
Import schema from:
|
||||
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"
|
||||
hx-get="{% url 'atlas:collection_question_schemas' case_detail.collection.id %}"
|
||||
hx-target=".offcanvas-body"
|
||||
>Collection questions</button>
|
||||
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"
|
||||
hx-get="{% url 'atlas:question_schemas_preset' %}"
|
||||
hx-target=".offcanvas-body"
|
||||
>Preset questions</button>
|
||||
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel"
|
||||
>
|
||||
<div class="offcanvas-header">
|
||||
<h5 id="offcanvasRightLabel">Question schemas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="POST">
|
||||
{% csrf_token %}
|
||||
@@ -13,12 +39,14 @@
|
||||
<button type="submit" value="save" name="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
<h2>Blank form</h2>
|
||||
{% comment %} <h2>Blank form</h2>
|
||||
<form>
|
||||
{{ blank_form}}
|
||||
</form>
|
||||
</form> {% endcomment %}
|
||||
|
||||
<h2>Question display</h2>
|
||||
This shows the form as it will be displayed (with the correct answers). If you wish to edit a correct answer you can change it below.
|
||||
|
||||
<h2>Correct answers</h2>
|
||||
<form method="POST" class="post-form">
|
||||
{% csrf_token %}
|
||||
{{example_form}}
|
||||
@@ -31,6 +59,21 @@
|
||||
|
||||
{% comment %} {{ example_form.media }} {% endcomment %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
|
||||
<script src="/static/django_jsonforms/jsoneditor_init.js"></script>
|
||||
<script src="/static/django_jsonforms/jsoneditor_init.js"></script>
|
||||
<script>
|
||||
document.addEventListener('htmx:afterRequest', function(evt) {
|
||||
// Put the JS code that you want to execute here
|
||||
console.log($('.use-layout').each((n, el) => {
|
||||
el.addEventListener('click', (e) => {
|
||||
console.log(e.target.parentElement.querySelector('.schema').dataset.schema);
|
||||
window.jsoneditor_id_question_schema.set(
|
||||
{
|
||||
json: JSON.parse(e.target.parentElement.querySelector('.schema').dataset.schema)
|
||||
}
|
||||
)
|
||||
});
|
||||
}))
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,50 @@
|
||||
|
||||
{% load static %}
|
||||
{% comment %} <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script> {% endcomment %}
|
||||
<ol>
|
||||
{% for case_detail in case_details %}
|
||||
|
||||
<li id="case-detail-{{case_detail.pk}}"{% if case_detail.question_schema %} class="cases"{% endif %}>
|
||||
<h2>Case: {{ case_detail.case.title }}</h2>
|
||||
|
||||
{% if case_detail.question_schema %}
|
||||
<button class="btn btn-sm btn-secondary use-layout">Use layout</button>
|
||||
<details><summary>Schema:</summary>
|
||||
<div class="schema" data-schema='{{ case_detail.get_question_schema }}'>{{ case_detail.question_schema }}</div>
|
||||
</details>
|
||||
<div class="form"></div>
|
||||
{% else %}
|
||||
<p>No question(s)</p>
|
||||
{% endif %}
|
||||
|
||||
</li>
|
||||
|
||||
{% endfor %}
|
||||
</ol>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function() {
|
||||
$(".cases").each(function(n, el){
|
||||
console.log(n, el);
|
||||
form_el = $(el).find(".form").get(0);
|
||||
schema = $(el).find(".schema").get(0).dataset.schema;
|
||||
console.log(schema)
|
||||
console.log(form_el)
|
||||
form = new JSONEditor(form_el, {
|
||||
schema: JSON.parse(schema),
|
||||
theme: 'bootstrap4',
|
||||
disable_edit_json: true,
|
||||
disable_collapse: true,
|
||||
disable_properties: true,
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,44 @@
|
||||
|
||||
{% load static %}
|
||||
{% comment %} <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script> {% endcomment %}
|
||||
<ol>
|
||||
{% for schema in schemas %}
|
||||
|
||||
<li class="schemas">
|
||||
<button class="btn btn-sm btn-secondary use-layout">Use layout</button>
|
||||
<details><summary>Schema:</summary>
|
||||
<div class="schema" data-schema='{{schema|safe}}'>{{schema}}</div>
|
||||
</details>
|
||||
<div class="form"></div>
|
||||
|
||||
</li>
|
||||
|
||||
{% endfor %}
|
||||
</ol>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function() {
|
||||
$(".schemas").each(function(n, el){
|
||||
console.log(n, el);
|
||||
form_el = $(el).find(".form").get(0);
|
||||
schema = $(el).find(".schema").get(0).dataset.schema;
|
||||
console.log(schema)
|
||||
console.log(form_el)
|
||||
form = new JSONEditor(form_el, {
|
||||
schema: JSON.parse(schema),
|
||||
theme: 'bootstrap4',
|
||||
disable_edit_json: true,
|
||||
disable_collapse: true,
|
||||
disable_properties: true,
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
{% load static %}
|
||||
|
||||
<div id="jsoneditor_{{ widget.attrs.id }}" class="svelte-jsoneditor-wrapper"></div>
|
||||
|
||||
|
||||
<textarea name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</textarea>
|
||||
|
||||
<script type="module">
|
||||
import { JSONEditor } from '{% static "django_svelte_jsoneditor/js/svelte_jsoneditor.js" %}'
|
||||
|
||||
const editor = new JSONEditor({
|
||||
target: document.getElementById('jsoneditor_{{ widget.attrs.id }}'),
|
||||
props: {
|
||||
content: {
|
||||
text: document.getElementById('{{ widget.attrs.id }}').value || undefined
|
||||
},
|
||||
onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => {
|
||||
const value = updatedContent.json ? JSON.stringify(updatedContent.json) : updatedContent.text
|
||||
document.getElementById('{{ widget.attrs.id }}').value = value
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
editor.updateProps({{ widget.props|safe }})
|
||||
window.jsoneditor_{{ widget.attrs.id }} = editor
|
||||
</script>
|
||||
Reference in New Issue
Block a user