Dynamically create and show all exercise cards (bc867105) · Commits · Technik / teaching / yalikejazz

static/js/yalikejazz.mjs

+26 −26

Changes for static/js/yalikejazz.mjs: 26 added lines, 26 removed lines.
Original line number	Diff line number	Diff line
		@@ -37,52 +37,58 @@ function createAndInitExerciseCard(exercise, exerciseIndex) {
		return cardEl
		}

		function loadExercise(exerciseIndex) {
		/**
		* Load all exercises into the #exercises list in the DOM (in a collapsed state,
		* meaning that description and action buttons are not visible).
		*/
		function initExerciseList() {
		document.querySelector("#exercises").append(...exercises.map(createAndInitExerciseCard))
		}

		/**
		* Start an exercise with the given index, also updating the currentState
		* @param {Number} exerciseIndex Index of the exercise to start
		*/
		function startExercise(exerciseIndex) {
		const cardEl = document.querySelector(`.exercise[data-exercise-index='${exerciseIndex}']`)
		const exercise = exercises[exerciseIndex]

		document.querySelector("#exerciseName").textContent = exercise.name
		document.querySelector("#exerciseIndex").textContent = exerciseIndex
		exercise.onDescribed(
		description => document.querySelector("#exerciseDescription").textContent = description
		)
		currentState.exercise = exerciseIndex
		exercise.onDescribed(description => cardEl.querySelector(".description").textContent = description)
		exercise.onVerified(
		success => {
		if(success) {
		currentState.complete(exerciseIndex)
		displayAsSolved(cardEl)

		const nextExerciseIndex = findNextIncompleteExerciseIndex(exerciseIndex)

		if(nextExerciseIndex === null) {
		alert("You successfully completed the pool test! You can now hand in :)")
		} else {
		alert(`You completed this exercise :) Exercise #${nextExerciseIndex} will be next...`)
		currentState.exercise = nextExerciseIndex
		loadExercise(currentState.exercise)
		startExercise(nextExerciseIndex)
		}

		} else {
		document.querySelector("button[data-action=confirm]").style.display = "none"
		alert("You failed :( Reset the VM and try again.")
		}
		}
		)
		confirmExerciseCompletion = exercise.manuallyConfirm.bind(exercise)

		exercise.start()

		// Display all exercises as non-current, except for this one
		document.querySelectorAll(".exercise").forEach(el => displayAsNonCurrent(el))
		displayAsCurrent(cardEl)
		}

		function initActionLinks() {
		// TODO Replace with something good-looking
		document.querySelectorAll("button[data-action]").forEach(button=>{
		const handler = {
		"reset": function() {
		location.reload()
		},
		"hand-in": function() {
		alert("Please send this token to GT: "+getHandInToken())
		},
		"confirm": function() {
		confirmExerciseCompletion()
		},
		"begin": function() {
		document.body.classList.remove("overlay-shown")
		currentState.firstStart = false
		@@ -108,17 +114,11 @@ export function main() {
		document.body.classList.add("overlay-shown")
		}

		initExerciseList()
		initActionLinks()

		document.querySelector("#lastExerciseIndex").textContent = exercises.length -1

		// If there is no current exercise, start with the first one. It might be already completed,
		// but in this case the user simply has to navigate to an incomplete one.
		if(currentState.exercise === null) {
		currentState.exercise = 0
		}

		loadExercise(currentState.exercise)
		// If there is no current exercise, start with the first one.
		startExercise(currentState.exercise \|\| 0)
		}

		window.onload = main

static/pooltest.html

+1 −12

Changes for static/pooltest.html: 1 added line, 12 removed lines.
Original line number	Diff line number	Diff line
		@@ -42,18 +42,7 @@

		<h2>Aufgaben</h2>

		<div class="card">
		<div class="title">
		<h2>Aktuelle Aufgabe (#<span id="exerciseIndex"></span>): <span id="exerciseName"></span></h2>
		</div>
		<div class="content">
		<p id="exerciseDescription"></p>
		<div class="actions">
		<button data-action="confirm" class="primary">Ich denke, ich bin fertig.</button>
		<button data-action="reset">Aufgabe neu beginnen</button>
		</div>
		</div>
		</div>
		<div id="exercises"></div>

		<h2>Optionen</h2>
		<ul>