89 lines
2.6 KiB
JavaScript
89 lines
2.6 KiB
JavaScript
// 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;
|
|
}); |