create static

static/random.js

@@ -0,0 +1,89 @@
+// Funktion, um eine zufällige Frage auszuwählen
+function getRandomQuestion() {
+  randomIndex = Math.floor(Math.random() * wordLists[0].length);
+  while (usedIndices.includes(randomIndex)){
+    if (usedIndices.length != wordLists[0].length){
+      randomIndex = Math.floor(Math.random() * wordLists[0].length);
+    }
+    else {
+      usedIndices = [];
+      randomIndex = Math.floor(Math.random() * wordLists[0].length);
+    }
+  }
+
+  usedIndices.push (randomIndex)
+  const randomQuestion = wordLists.map(list => {
+    return list[randomIndex];
+  });
+
+  return randomQuestion;
+}
+
+const randomizeButton = document.getElementById("randomize-button");
+const scrollingWordsBoxes = document.querySelectorAll(".scrolling-words-box ul");
+const permQuestions = document.querySelectorAll(".perm-questions h1")
+var usedIndices = [];
+var dur = 3800;
+var run = 0;
+
+randomizeButton.addEventListener("click", function () {
+  scrollingWordsBoxes.forEach((box, index) => {
+    if (index!=0){
+    box.style.animation = `scrollUp 1.5s forwards ${-(6/(index+3))}s 3`;
+  }
+    else {
+      box.style.animation = `scrollUp 1.5s forwards 2`;
+    }
+  });
+
+  
+  permQuestions.forEach((text, index) => {
+    if (dur == 10) {
+      (index == 1) ? text.classList.remove ("fade-ani-u") : text.classList.remove ("fade-ani");
+      void text.offsetWidth;
+    }
+    else {
+      text.classList.remove ("erst");
+      void text.offsetWidth;
+      (index == 1) ? text.classList.add ("fadeIn-ani-u") : text.classList.add ("fadeIn-ani");
+    }
+    });
+  
+
+  
+
+  setTimeout(function () {
+    const randomQuestionWords = getRandomQuestion();
+
+    scrollingWordsBoxes.forEach(box => {
+      box.innerHTML = '';
+      box.classList.remove ("scroll-animating")
+      void box.offsetWidth;
+    });
+    
+
+    scrollingWordsBoxes.forEach((box, index) => {
+      const newQuestionItem = document.createElement("li");
+      newQuestionItem.textContent = randomQuestionWords[index];
+      box.appendChild(newQuestionItem);
+
+      newQuestionItem.style.opacity = 0;
+
+      permQuestions.forEach((text, index) => {
+        if (run >= 2){
+          (index == 1) ? text.classList.remove ("fadeIn-ani-u") : text.classList.remove ("fadeIn-ani");
+          (index == 1) ? text.classList.add ("fade-ani-u") : text.classList.add ("fade-ani");
+          console.log(run);
+        }
+        });
+
+
+      setTimeout(function () {
+        newQuestionItem.style.animation = "scrollUp 0.2s forwards 1";
+        box.classList.add("scroll-animating");
+      }, index * 90); 
+      dur = 10;
+    });
+  }, dur); 
+  run += 1;
+});