5.2.1. 🚀 Interaktive Quizze mit JupyterQuiz#
Interaktive Quizze bieten direktes Feedback zu kleinen Wissenseinheiten. Wir benutzen dafür das Tool JupyterQuiz, welches direkt in ein Jupyter Book integriert werden kann. Es ermöglicht zwei Fragentypen und stellt die Quizze in der OER interaktiv dar.
Integration in ein Jupyter Notebook#
Um JupyterQuiz in ein Notebook zu integrieren muss es zuerst installiert werden. Die requirements.txt in diesem Projekt enthält die Anweisung jupyterquiz zu installieren.
Ist das Paket in Ihrem virtuellen Environment installiert, so können Sie es in Ihrem Jupyter Notebook über den nachfolgenden Code importieren.
from jupyterquiz import display_quiz
Integration in ein MyST-Markdown-Dokument#
Schreiben Sie Ihre Inhalte in einem .md-Dokument, so können Sie dieses ausführbar machen, indem Sie die nachfolgenden YAML-Metadaten ganz am Anfang der .md-Datei einfügen. Diese sogenannte Frontmatter konfiguriert Jupyter Book so, dass speziell ausgezeichnete Code-Blöcke in einem Python-Kernel ausgeführt werden. Sie verhalten sich also äquivalent zu einem Jupyter Notebook.
---
jupytext:
formats: md:myst
text_representation:
extension: .md
format_name: myst
kernelspec:
display_name: Python 3
language: python
name: python3
---
Dann können Sie das Modul laden, wie Sie es auch in einem Jupyter Notebook tun würden. Der nachfolgende Markdown-Code stellt dabei eine Code-Zelle dar, die in der HTML-Darstellung durch Jupyter Book ausgebledet wird. Dies wird in einer MyST-Markdown-Code-Zelle über die Zeile konfiguriert, die mit :tags: beginnt.
Das Ausblenden einer Code-Zelle ist insbesondere dann wünschenswert, wenn die Leser:innen nicht durch Code abgelenkt werden sollen. Der Code, der ein Quiz definiert gehört nicht zum Code der Fallstudie bzw. OER, welchen die Lernenden verstehen und verinnerlichen sollen.
```{code-cell} ipython3
:tags: [remove-cell]
from jupyterquiz import display_quiz
```
Diese Datei ist als Jupyter Notebook (.ipynb) geschrieben, aber die Beispiele sollten ohne Änderungen in einem MyST-Markdown-Dokument funktionieren.
Definition von Quiz-Fragen#
Sie können Quiz-Fragen entweder direkt als Python-Code definieren oder Sie schreiben eine JSON-Datei und laden die Fragen aus dieser. Die .json-Datei könnte sogar per URL adressiert werden; hier gehen wir davon aus, dass Sie lokale Dateien nutzen.
Direkte Definition im Python-Code#
Die Funktion, welche das interaktive Quiz erstellt, erwartet ein Array ([]) von Dictionaries ({}), in welchen jeweils eine Frage ("question"), ein Fragentyp ("type") und ein Array mit Antworten ("answers") definiert ist.
question = [
{
"question": "Welche Bestandteile müssen Sie definieren, um ein JupyterQuiz erstellen zu können?",
"type": "multiple_choice",
"answers": [
{"answer": "Keine.", "correct": False},
{
"answer": "Die Frage, ein Fragentyp und ein Array von Antworten.",
"correct": True,
},
],
}
]
Ist die Fragensammlung definiert, so kann diese mittels der Funktion display_quiz angezeigt werden.
display_quiz(question)
Es bietet sich an, die Fragendefinition und die Präsentation in einer Code-Zelle zusammen auszuführen und diese Zelle dann unsichtbar zu stellen. Die Ergebnisse der Code-Zelle müssen dabei sichtbar bleiben, weshalb hier das Zellen-Tag remove-input genutzt wird. Sehen Sie sich nach Beantwortung des nachfolgenden Quizzes den zugehörigen Code an.
Laden der Fragen aus einer JSON-Datei#
Um die Fragen aus einer JSON-Datei zu importieren, übergeben Sie der Funktion display_quiz direkt den Pfad zur Datei.
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/multiple_choice_one_correct.json")
Achtung!
Wollen Sie HTML nutzen, um den Text der Frage bzw. der Antworten zu formatieren, so müssen Sie vor dem ersten HTML-Tag einmal die Zeichenkette <> einfügen. Diese unterdrückt einen Fehler, der das erste Vorkommen eines < als Beginn eines Links interpretiert, indem ein leerer Link ohne Link-Text generiert wird.
Ein Beispiel dafür finden Sie in der Daten /assets/assessment/umsetzung/jupyterquiz/many_choice_one_and_multiple_correct.json und im Abschnitt many_choice auf dieser Seite.
Andere Fragentypen#
Bisher nutzten wir für alle Beispiel-Quizze den Fragentyp multiple_choice welcher zum Fragentyp many_choice äquivalent ist. Zudem gibt es noch den Fragentyp numeric. Bisher gab es pro Frage jeweils nur eine korrekte Antwort, jedoch sind mehrere korrekte Antworten möglich. In den nachfolgenden Abschnitten werden die bisher noch nicht präsentierten Kombinationen gezeigt. Sehen Sie jeweils in den zugehörigen .json-Dateien nach, wie die Fragentypen definiert werden.
multiple_choice mit mehreren korrekten Antworten#
Wie Sie sehen wird nach dem ersten Klick auf eine Antwortmöglichkeit angezeigt, wie viele Antwortmöglichkeiten korrekt sind.
many_choice#
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/many_choice_one_and_multiple_correct.json")
numeric#
Wollen Sie eine Zahl abfragen, so geht das mit numeric. Sie können dabei spezifische Werte oder auch Wertebereiche als Antwortmöglichkeiten definieren.
Konfiguration der Darstellung von Quizzes#
JupyterQuiz bietet die Möglichkeit, die Farben der verschiedenen Fragentypen anzupassen. Zudem kann die Anzahl der Antwort-Spalten angepasst werden. Nachfolgend werden verschiedene Konfigurationen für die Darstellung gezeigt.
num#
Der Funktion display_quiz wird immer eine Liste (ein Array) von Fragen übergeben. Mit der Option num kann festgelegt werden, wie viele davon tatsächlich dargestellt weden sollen – die Auswahl geschieht zufällig. Nachfolgend wird nur eine der zwei möglichen Fragen präsentiert.
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/many_choice_one_and_multiple_correct.json", num=1)
border_radius#
Sollen die Quizze eher eckig aussehen, kann der border_radius deaktiviert werden, indem er auf False gesetzt wird.
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/multiple_choice_one_correct.json", border_radius=False)
question_alignment#
Der Fragentext kann rechts- oder linksbündig oder mittig präsentiert werden. Die linksbündige Darstellung ist die Default-Einstellung.
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/multiple_choice_one_correct.json", question_alignment="right")
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/multiple_choice_one_correct.json", question_alignment="center")
max_width#
Mit max_width wird die Breite des Fragenfeldes (und damit der Antwortfelder) festgelegt. Dieses darf nicht zu klein sein, damit der Fragentext noch korrekt dargestellt werden kann.
max_width gibt die maximale Breite an. Ist das Browser-Fenster schmaler, so wird die Frage schmaler angezeigt.
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/multiple_choice_one_correct.json", max_width=100)
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/multiple_choice_one_correct.json", max_width=300)
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/multiple_choice_one_correct.json", max_width=1000)
colors#
JupyterQuiz definiert eine Reihe von Farbwerten per CSS-Variablen. Diese werden pro Aufruf von display_quiz neu definiert, weshalb die Farben jedes Mal übergeben werden müssen/können.
Es empfielt sich die Farben einmal pro OER zu definieren und diese dann auf den einzelnen Unterseiten zu importieren und an display_quiz zu übergeben.
jq_colors = {
"--jq-multiple-choice-bg": "#6f78ffff", # Background for the question part of multiple-choice questions
"--jq-mc-button-bg": "#fafafa", # Background for the buttons when not pressed
"--jq-mc-button-border": "#e0e0e0e0", # Border of the buttons
"--jq-mc-button-inset-shadow": "#555555", # Color of inset shadow for pressed buttons
"--jq-many-choice-bg": "#f75c03ff", # Background for question part of many-choice questions
"--jq-numeric-bg": "#392061ff", # Background for question part of numeric questions
"--jq-numeric-input-bg": "#c0c0c0", # Background for input area of numeric questions
"--jq-numeric-input-label": "#101010", # Color for input of numeric questions
"--jq-numeric-input-shadow": "#999999", # Color for shadow of input area of numeric questions when selected
"--jq-incorrect-color": "#c80202", # Color for incorrect answers
"--jq-correct-color": "#009113", # Color for correct answers
"--jq-text-color": "#fafafa", # Color for question text
}
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/colors_test.json", colors=jq_colors)
Es können auch nur Teile des Farbschemas verändert werden.
jq_colors = {
"--jq-multiple-choice-bg": "#00305e",
"--jq-many-choice-bg": "##00305e",
"--jq-numeric-bg": "##00305e",
}
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/colors_test.json", colors=jq_colors)
QUADRIGA Styleguide für JupyterQuiz#
Im Python-Modul quadriga werden alle relevanten Konfigurationen und Voreinstellungen gesammelt. Im Untermodul quadriga.colors finden sich alle Farbdefinitionen.
Um diese aus einem Jupyter Notebook heraus zu importieren, müssen Sie zuerst sys importieren und dann das Hauptverzeichnis der OER in den Pfad aufnehmen. Dann können Sie das lokale Modul quadriga importieren.
import sys
sys.path.append("../..")
from quadriga import colors
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/colors_test.json", colors = colors.jupyterquiz)
Vorlage zum Kopieren in Markdown-Dateien#
Sollen Quizzes per JupyterQuiz in einer .md-Datei genutzt werden, muss ganz am Anfang der folgende Inhalt platziert werden. Alle anderen Inhalte der Seite können dann darauf folgen.
---
jupytext:
formats: md:myst
text_representation:
extension: .md
format_name: myst
kernelspec:
display_name: Python 3
language: python
name: python3
---
```{code-cell} ipython3
:tags: [remove-cell]
from jupyterquiz import display_quiz
import sys
sys.path.append("..")
from quadriga import colors
```
Die YAML-Frontmatter (die Inhalte zwischen den drei Minus-Zeichen (---)) konfigurieren Jupyter Book so, dass Python-Code in Code-Zellen ausführbar ist.
Darauf folgt eine Code-Zelle, die nicht angezeigt wird. In ihr wird die Programmbibliothek für JupyterQuiz geladen sowie die Farbcodes der QUADRIGA-Farben.
Soll nun ein Quiz angezeigt werden, so erfolgt mit einem Aufruf der Funktion display_quiz wie folgt:
```{code-cell} ipython3
:tags: [remove-input]
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/colors_test.json", colors = colors.jupyterquiz)
```
Bei Code-Zelle wird nur das Ergebnis des Codes, nicht aber der Code selbst angezeigt. Die Definition des Quizzes steht in einer .json-Datei, die über einen indirekten Pfad referenziert wird.
Vorlage zum Kopieren in Jupyter Notebooks (.ipynb)#
Analog zum Beispiel in Markdown-Dateien muss am Anfang des Dokuments JupyterQuiz konfiguriert werden. Die Code-Zelle muss mit dem Cell-Tag remove-cell versehen werden. Der Python-Code in der Code-Zelle ist dann:
from jupyterquiz import display_quiz
import sys
sys.path.append("..")
from quadriga import colors
Soll ein Quiz angezeigt werden, so wird eine Code-Zelle mit dem Cell-Tag remove-input und dem folgenden Inhalt erstellt, wobei der Pfad zur .json-Datei des Quizzes entsprechend angepasst werden muss.
display_quiz("../../assets/assessment/umsetzung/jupyterquiz/colors_test.json", colors = colors.jupyterquiz)