Load dialog from exercises file (4599a95b) · Commits · Technik / teaching / yalikejazz

static/js/exercises.api.mjs

+13 −2

Original line number	Diff line number	Diff line
		@@ -244,11 +244,13 @@ class Test {
		* @param {string} name Human-readable name of the test
		* @param {Exercise[]} exercises The exercises this test consists of
		* @param {boolean} handInEnabled If handing in is enabled (usually yes, but maybe not for practice tests)
		* @param {string} welcomeHtml HTML code to show in the welcome dialog
		*/
		constructor(name, exercises, handInEnabled) {
		constructor(name, exercises, handInEnabled, welcomeHtml) {
		this.name = name
		this.exercises = exercises
		this.handInEnabled = handInEnabled
		this.welcomeHtml = welcomeHtml
		}

		/**
		@@ -280,6 +282,7 @@ export function test(name, exerciseCreationFunction) {
		const testConfigCollector = {
		exercises: [],
		handInEnabled: true,
		welcomeHtml: null,

		/**
		* Add an exercise.
		@@ -298,10 +301,18 @@ export function test(name, exerciseCreationFunction) {
		*/
		disableHandIn() {
		this.handInEnabled = false
		},

		/**
		* Set the message shown in the welcome dialog
		* @param {string} html The HTML source code that forms the welcome message
		*/
		welcome(html) {
		this.welcomeHtml = html
		}
		}

		exerciseCreationFunction.bind(testConfigCollector)()

		return new Test(name, testConfigCollector.exercises, testConfigCollector.handInEnabled)
		return new Test(name, testConfigCollector.exercises, testConfigCollector.handInEnabled, testConfigCollector.welcomeHtml)
		}

static/js/exercises.mjs

+20 −1

Original line number	Diff line number	Diff line
		@@ -2,12 +2,31 @@
		import { test } from "./exercises.api.mjs";

		export const practice = test("Linux-Übungsmodus", function() {
		this.welcome(`
		<h1>Willkommen zum Linux-Übungsmodus</h1>
		<p>Hier kannst du vollkommen frei mit dem Linux-Terminal auf der linken Seite herumexperimentieren. Das Terminal läuft isoliert in diesem Browsertab, <strong>du kannst also absolut nichts kaputt machen</strong> (weder auf deinem Rechner, noch bei uns) – im schlimmsten Fall lädst du die Seite neu und alles ist vergessen ;)</p>
		<p>Aufgaben gibt es im Übungsmodus nicht, du kannst diese Überschrift also ignorieren. Sobald du dich genügend vorbereitet fühlst, kehre zur Startseite zurück und wähle „Pooltest ablegen“ aus, um Aufgaben zu erhalten.</p>
		<p>Wir verwenden dieses Semester zum ersten Mal YALIKEJAZZ, also zögere nicht, dich <strong>bei Fragen und Problemen jederzeit an uns zu wenden</strong> (<code>technik@cl.uni-heidelberg.de</code>) – wir schauen uns das an und finden gemeinsam eine Lösung.</p>
		`)

		this.disableHandIn()

		// TODO Add practice exercises
		})

		export const pooltest = test("Pooltest Sommersemester 2022", function () {
		export const pooltest = test("Pooltest Sommersemester 2022", async function () {
		this.welcome(`
		<h1>Willkommen zum Pooltest!</h1>
		<p>In diesem Test sollst du nachweisen, dass du grundlegende Linux-Kenntnisse besitzt und diese auch anwenden kannst. Der Test besteht aus <strong id="exerciseCnt"></strong> Aufgaben, dauert etwa eine Stunde und wir empfehlen, ihn am Stück durchzuarbeiten.</p>
		<p>Jede Aufgabe läuft nach dem gleichen Prinzip ab: Links siehst du ein Linux-Terminal, in dem du Befehle eingeben kannst. Rechts steht eine Aufgabenstellung mit einem Ziel, das du erreichen sollst. Wie du das tust, ist dir überlassen (es gibt oft mehr als einen Weg zum Ziel). Sobald du denkst, dass du mit einer Aufgabe fertig bist, drücke auf den Knopf, um deine Lösung zu überprüfen. Falls sie richtig war, wird die Aufgabe als gelöst markiert, ansonsten kannst du es beliebig oft erneut versuchen.</p>
		</p>
		<p><strong>Du kannst nichts kaputt machen!</strong> Das Linux-Terminal läuft sicher und isoliert nur in deinem Browser und hat auf nichts Zugriff außerhalb von diesem Tab. Wenn du denkst, dass du in einer Sackgasse gelandet bist, kannst du über „Aufgabe neu beginnen“ das Terminal neustarten.</p>

		<p>Du kannst Aufgaben auch überspringen und später wieder zu ihnen zurückkehren. Sobald du alle Aufgaben gelöst hast, drücke auf den entsprechenden Knopf, um abzugeben. Falls du eine Aufgabe partout nicht gelöst bekommst, kannst du auch unvollständig abgeben (sag dann am besten dazu, mit welchen Aufgaben du Probleme hattest). Wir schauen uns deinen Test dann an, und sofern er ansonsten einen guten Eindruck macht, bestehst du ihn trotzdem :)</p>

		<p>Für uns ist das auch eine Premiere, daher zögere nicht, dich <strong>bei Fragen und Problemen jederzeit an uns zu wenden</strong> (<code>technik@cl.uni-heidelberg.de</code>) – ganz gleich, ob das Problem eine zu schwere oder leichte Aufgabe ist oder ein Programmierfehler in YALIKEJAZZ, wir schauen uns das an und finden gemeinsam eine Lösung.</p>
		`)

		this.exercise("Datei anlegen", async function () {
		this.describe(`Erstelle eine Datei mit dem Namen "botschaft" und dem Inhalt
		"Der Junge sieht den Mann mit dem Fernglas." (jeweils ohne

static/js/yalikejazz.mjs

+26 −19

Original line number	Diff line number	Diff line
		import { currentState } from "./state.mjs"
		import { pooltest } from "./exercises.mjs"
		import { pooltest, practice } from "./exercises.mjs"
		import { getHandInToken } from "./snakeoil.mjs"
		import { createExerciseCard, displayAsSolved, displayAsNonCurrent, displayAsCurrent } from "./exercises.cards.mjs"

		@@ -99,31 +99,38 @@ function redirectToPractice() {
		}

		export function main() {
		const params = new URLSearchParams(location.search)
		const testId = params.get("id")

		if(testId === "pooltest") {
		currentTest = pooltest
		} else if(testId === "practice") {
		// TODO Replace this with something more elegant
		document.querySelector("#testName").textContent = "Übungsmodus"
		document.querySelector("[data-action='welcome-again").style.display = "none"
		document.querySelector("section.exercises").textContent = "Hier werden im Pooltest Aufgaben erscheinen, die du bearbeiten musst. Im Übungsmodus gibt es keine Aufgaben, sondern du kannst vollkommen frei mit dem Linux-Terminal auf der linken Seite herumexperimentieren. Das Terminal läuft isoliert in diesem Browsertab, du kannst also absolut nichts kaputt machen (weder auf deinem Rechner, noch bei uns) – im schlimmsten Fall lädst du die Seite neu und alles ist vergessen ;)"
		document.querySelector("section.options").style.display = "none"
		currentTest = {
		"pooltest": pooltest,
		"practice": practice
		}[new URLSearchParams(location.search).get("id")]

		currentTest = null
		} else {
		// When no testId is provided or it is an unknown one, redirect to something working
		if(currentTest === null) {
		// When no test can be loaded, redirect to a URL which leads to a known existing test
		redirectToPractice()
		}

		document.querySelector("#testName").textContent = currentTest.name
		document.querySelector("#exerciseCnt").textContent = currentTest.exercises.length
		document.title = `${currentTest.name} · ${document.title}`

		if(currentTest.welcomeHtml) {
		document.querySelector("#welcome").innerHTML = currentTest.welcomeHtml
		const exerciseCnt = document.querySelector("#exerciseCnt")
		if(exerciseCnt) {
		exerciseCnt.textContent = currentTest.exercises.length
		}
		if (currentState.firstStart) {
		// Show welcome message
		document.body.classList.add("overlay-shown")
		}
		} else {
		// No welcome dialog exists, so we also don't want the user to be able to show it again
		// (because what does this even mean)
		document.querySelector("[data-action='welcome-again").style.display = "none"
		}

		if(!currentTest.handInEnabled) {
		// TODO Ideally, this should not hide the entire options section, but just the hand-in button
		document.querySelector("section.options").style.display = "none"
		}

		initExerciseList()
		initActionLinks()

static/test.html

+2 −11

Original line number	Diff line number	Diff line
		@@ -15,17 +15,8 @@

		<body>
		<div class="overlay">
		<div class="dialog welcome">
		<h1>Willkommen zum Pooltest!</h1>
		<p>In diesem Test sollst du nachweisen, dass du grundlegende Linux-Kenntnisse besitzt und diese auch anwenden kannst. Der Test besteht aus <strong id="exerciseCnt"></strong> Aufgaben, dauert etwa eine Stunde und wir empfehlen, ihn am Stück durchzuarbeiten.</p>
		<p>Jede Aufgabe läuft nach dem gleichen Prinzip ab: Links siehst du ein Linux-Terminal, in dem du Befehle eingeben kannst. Rechts steht eine Aufgabenstellung mit einem Ziel, das du erreichen sollst. Wie du das tust, ist dir überlassen (es gibt oft mehr als einen Weg zum Ziel). Sobald du denkst, dass du mit einer Aufgabe fertig bist, drücke auf den Knopf, um deine Lösung zu überprüfen. Falls sie richtig war, wird die Aufgabe als gelöst markiert, ansonsten kannst du es beliebig oft erneut versuchen.</p>
		</p>
		<p><strong>Du kannst nichts kaputt machen!</strong> Das Linux-Terminal läuft sicher und isoliert nur in deinem Browser und hat auf nichts Zugriff außerhalb von diesem Tab. Wenn du denkst, dass du in einer Sackgasse gelandet bist, kannst du über „Aufgabe neu beginnen“ das Terminal neustarten.</p>

		<p>Du kannst Aufgaben auch überspringen und später wieder zu ihnen zurückkehren. Sobald du alle Aufgaben gelöst hast, drücke auf den entsprechenden Knopf, um abzugeben. Falls du eine Aufgabe partout nicht gelöst bekommst, kannst du auch unvollständig abgeben (sag dann am besten dazu, mit welchen Aufgaben du Probleme hattest). Wir schauen uns deinen Test dann an, und sofern er ansonsten einen guten Eindruck macht, bestehst du ihn trotzdem :)</p>

		<p>Für uns ist das auch eine Premiere, daher zögere nicht, dich <strong>bei Fragen und Problemen jederzeit an uns zu wenden</strong> (<code>technik@cl.uni-heidelberg.de</code>) – ganz gleich, ob das Problem eine zu schwere oder leichte Aufgabe ist oder ein Programmierfehler in YALIKEJAZZ, wir schauen uns das an und finden gemeinsam eine Lösung.</p>

		<div class="dialog">
		<div class="message" id="welcome"></div>
		<div class="actions">
		<button class="primary big" data-action="begin">Los geht's!</button>
		<button class="big" data-action="continue">Weiter geht's :)</button>