Add unusually long verification animation (29d45591) · Commits · Technik / teaching / yalikejazz

static/css/yalikejazz.css

+26 −0

Original line number	Diff line number	Diff line
		@@ -86,6 +86,10 @@ code {
		color: #ffd533;
		}

		.card.unusual .content .loader {
		color: #fc3232;
		}

		.card .content .loader .loader-bg {
		background-color: #334859;
		filter: blur(7px);
		@@ -117,6 +121,28 @@ code {
		animation: escaleY 1s infinite ease-in-out;
		}

		.card.unusual .content .loader .loader-animation,
		.card.unusual .content .loader .loader-animation:before,
		.card.unusual .content .loader .loader-animation:after {
		background-color: #fc3232;
		}

		.card .standard {
		display: initial;
		}

		.card .unusual {
		display: none;
		}

		.card.unusual .standard {
		display: none;
		}

		.card.unusual .unusual {
		display: initial;
		}

		.card .content .loader .loader-animation {
		position: relative;
		animation-delay: -0.16s;

+13 −2

Original line number	Diff line number	Diff line
		@@ -40,15 +40,25 @@ export function displayAsNonCurrent(cardEl) {
		* @param {HTMLElement} cardEl The .card element
		*/
		export function displayAsVerifying(cardEl) {
		cardEl.classList.remove("unusual")
		cardEl.classList.add("verifying")
		}

		/**
		* Changes the appearance of the given exercise card so it shows a message that the verification takes
		* an unusually long time. Only works when already displayed as verifying.
		* @param {HTMLElement} cardEl The .card element
		*/
		export function displayAsUnusuallyLongVerifying(cardEl) {
		cardEl.classList.add("unusual")
		}

		/**
		* Changes the appearance of the given exercise card so it looks normal (no verification indicator)
		* @param {HTMLElement} cardEl The .card element
		*/
		export function displayAsNonVerifying(cardEl) {
		cardEl.classList.remove("verifying")
		cardEl.classList.remove("verifying", "unusual")
		}

		/**
		@@ -95,7 +105,8 @@ export function createExerciseCard(exercise, onTitleClick) {
		<div class="loader-animation-wrapper">
		<span class="loader-animation"></span>
		</div>
		<span class="loader-desc">Deine Lösung wird überprüft...</span>
		<span class="loader-desc standard">Deine Lösung wird überprüft...</span>
		<span class="loader-desc unusual">Das braucht ungewöhnlich lange. <a href="javascript:location.reload()">Aufgabe neu beginnen?</a></span>
		`
		cardEl.querySelector(".content").append(descriptionEl, actionsEl, loaderEl)

+12 −2

Original line number	Diff line number	Diff line
		import { State } from "./state.mjs"
		import * as tests from "./exercises.mjs"
		import { createExerciseCard, displayAsSolved, displayAsNonCurrent, displayAsCurrent, displayAsVerifying, displayAsNonVerifying } from "./exercises.cards.mjs"
		import { createExerciseCard, displayAsSolved, displayAsNonCurrent, displayAsCurrent, displayAsVerifying, displayAsNonVerifying, displayAsUnusuallyLongVerifying } from "./exercises.cards.mjs"
		import { Exercise } from "./exercises.api.mjs"
		import { enableAutoFocus } from "./jslinux.api.mjs"

		@@ -41,13 +41,23 @@ function initExerciseList() {
		*/
		function startExercise(exercise) {
		const cardEl = document.querySelector(`.exercise[data-exercise-index='${exercise.index}']`)
		let unusuallyLongTimeoutId = null

		exercise.markAsCurrent(currentState)
		exercise.onDescribed((/** @type {string} */ description) => cardEl.querySelector(".description").textContent = description)
		exercise.onVerifiying(()=>displayAsVerifying(cardEl))
		exercise.onVerifiying(()=>{
		displayAsVerifying(cardEl)
		unusuallyLongTimeoutId = setTimeout(()=>{
		displayAsUnusuallyLongVerifying(cardEl)
		}, 5000)
		})
		exercise.onVerified(
		(/** @type {boolean} */ success) => {
		displayAsNonVerifying(cardEl)
		if(unusuallyLongTimeoutId) {
		clearTimeout(unusuallyLongTimeoutId)
		}

		if (success) {
		exercise.markAsSolved(currentState)
		displayAsSolved(cardEl)