Wenn die Kids bei meinen Aufgaben nicht weiterkommen, können sie auf "Lösung anzeigen" klicken, dann bekommen sie die Lösung angezeigt, es wird aber gleich eine neue Aufgabe angezeigt. Bei Rechenaufgaben ist das OK, bei Aufgaben mit Grafik ist das nicht so toll, da man die Lösung nicht mehr nachvollziehen kann.
Die Lösung wird zurzeit unter der Aufgabe angezeigt, sinnvoll wäre es, wenn die ursprüngliche Aufgabe stehen bliebe, die Lösung in einem neuen Fensterchen angezeigt würde und erst nachdem die Lösung zur Kenntnis genommen wurde und das entsprechende Fenster weggeklickt wurde, wird die nächste Aufgabe angezeigt.
Ich habe mal wieder keine Ahnung, ob das überhaupt geht und wo ich da suchen muss.
Weiterhin gelingt es mir nicht, den Abstand vor der gelben Box mit der Lösung verkleinern. Hilft da der Code?
Das Template:
Code: Alles auswählen
{% extends 'layout.html' %}
{% load static %}
{% load l10n %}
{% load mathfilters %}
{% block css_files %}
<link rel="stylesheet" href="{% static 'core/aufgabe.css' %}">
<link rel="stylesheet" href="{% static 'core/includes/header_aufgabe.css' %}">
{% endblock %}
{% block content %}
<header>
<h1>Der Rechentrainer</h1>
</header>
{% autoescape off %}
<ul>
<h2> {{titel }}</h2>
<h3>Aufg. Nr. {{aufgnr}}/10 </h3>
<h3>{{text}} {{aufgabe}}</h3>
{% if grafik.name %}
{% include grafik.name %}
{% endif %}
<p>
{% if 'dreimal' in message_unten %}
<li style="background-color:rgba(255,0, 0,0.6);">{{ message_unten }}</li>
<a href="{% url 'uebersicht' %}">weiter</a>
{% else %}
{{ message_unten }}
<form action="{% url 'main' kategorie.slug %}" method="post">
{% csrf_token %}
<fieldset>
{{ form.eingabe.label_tag }}
{{ form.eingabe }}
{{ einheit }}
<input class="button-primary" type="submit" value="Prüfen">
</fieldset>
</form>
<nav>
<a href="{% url 'loesung' zaehler_id %}">Lösung anzeigen</a>
{% if hilfe %}
<a href="{% url 'hilfe' zaehler_id protokoll_id %}"> Hilfe anzeigen</a>
{% endif %}
<a href="{% url 'abbrechen' zaehler_id %}">Abbrechen</a>
</nav>
{% endif%}
</p>
{% if messages %}
<p>
{% for message in messages %}
{% if 'leider' in message.message %}
<li style="background-color:rgba(255,0, 0,0.6);">{{ message }}</li>
{% elif 'richtig!' in message.message %}
<li style="background-color:rgba(0, 255, 0,0.6);">{{ message }}</li>
{% else %}
<li style="background-color:rgba(255, 255,0.6);">{{ message }}</li>
{% endif%}
{% endfor %}
</p>
{% endif %}
{% endautoescape %}Code: Alles auswählen
ul {
list-style: none;
margin: 0.5rem auto;
width: 90%;
max-width: 30rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 1rem;
border-radius: 12px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100rem;
background-color: #eeeeee;
}
li {
margin: 1rem 0;
text-align: center;
font-size: 1rem;
border-bottom: 0.5px solid #ccc;
padding-bottom: 0.5rem;
}
li a {
text-decoration: none;
color: #383838;
}
...