document.addEventListener("DOMContentLoaded", function () {
const eImage = document.getElementById("e-image");
const buttons = document.querySelectorAll(".direction-button");
const feedback = document.getElementById("feedback");
const resultsContainer = document.getElementById("results");
const scaleFactor = 100;
const absoluteScales = [291, 231, 184, 146, 116, 92, 73, 58, 46, 37, 29];
let currentIndex = 0;
let currentRotation = 0;
let testResults = [];
function setNewImage() {
if (currentIndex >= absoluteScales.length * 2) {
showResults();
return;
}
const scale = absoluteScales[Math.floor(currentIndex / 2)] * scaleFactor / 100;
currentRotation = [0, 90, 180, 270][Math.floor(Math.random() * 4)];
eImage.style.transform = `rotate(${currentRotation}deg) scale(${scale / 100})`;
currentIndex++;
}
buttons.forEach(button => {
button.addEventListener("click", function () {
const selectedRotation = parseInt(button.dataset.rotation);
const isCorrect = selectedRotation === currentRotation;
testResults.push({
level: Math.floor(currentIndex / 2),
rotation: currentRotation,
userChoice: selectedRotation,
correct: isCorrect
});
feedback.textContent = isCorrect ? "✔ OK" : "✖ X";
setTimeout(() => {
feedback.textContent = "";
setNewImage();
}, 1000);
});
});
function showResults() {
let resultsHTML = "
`;
document.body.innerHTML += htmlContent;
// CSS Styling
const style = document.createElement('style');
style.innerHTML = `
#test-container {
text-align: center;
margin: 20px auto;
}
#e-container {
width: 200px;
height: 200px;
margin: auto;
}
#e-image {
width: 100%;
height: auto;
transition: transform 0.3s ease-in-out;
}
#buttons {
margin-top: 20px;
}
.direction-button {
font-size: 20px;
margin: 10px;
padding: 10px 20px;
cursor: pointer;
}
#feedback {
font-size: 24px;
margin-top: 10px;
}
#results {
margin-top: 20px;
}
`;
document.head.appendChild(style);
Testresultater
- ";
testResults.forEach((result, index) => {
resultsHTML += `
- Level ${result.level}: ${result.correct ? "✔ Rigtigt" : "✖ Forkert"} `; }); resultsHTML += "
Tumbling E Synstest