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.
Ist die Fragensammlung definiert, so kann diese mittels der Funktion
display_quiz angezeigt werden.
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,
},
],
}
]
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)