Scribd
Upload
3 views2 pages

For Mule

This document is an HTML code for a geometry quiz application. It includes questions about geometric formulas and provides options for answers, with functionality to track the score. The quiz is styled with CSS for a user-friendly interface and utilizes JavaScript for interactivity and shuffling questions and answers.

Uploaded by

visanraresioan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views2 pages

For Mule

This document is an HTML code for a geometry quiz application. It includes questions about geometric formulas and provides options for answers, with functionality to track the score. The quiz is styled with CSS for a user-friendly interface and utilizes JavaScript for interactivity and shuffling questions and answers.

Uploaded by

visanraresioan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Quiz Geometrie</title>
<style>
body { font-family: Arial; background: #f0f0f0; padding: 20px; }
.quiz-container { background: #fff; padding: 20px; border-radius: 10px; max-
width: 800px; margin: auto; }
.question { font-weight: bold; margin-top: 20px; }
.answers button { display: block; margin: 8px 0; padding: 10px; border: 1px
solid #ccc; border-radius: 5px; background: #e7e7e7; cursor: pointer; }
.answers button:hover { background: #d0d0d0; }
.correct { background-color: #c8f7c5; }
.wrong { background-color: #f8d7da; }
#score { margin-top: 20px; font-size: 20px; }
</style>
</head>
<body>

<div class="quiz-container" id="quiz"></div>


<div id="score"></div>

<script>
const intrebari = [
{
intrebare: "Care este formula ariei unui pătrat?",
corect: "A = l^2",
optiuni: ["A = πr^2", "A = (B + b) * h / 2", "A = ab * sin(θ)"]
},
{
intrebare: "Cum se calculează perimetrul unui cerc?",
corect: "P = 2πr",
optiuni: ["P = a + b + c", "P = 4 * l", "P = d^2 + 4"]
},
{
intrebare: "Formula teoremei lui Pitagora este:",
corect: "c^2 = a^2 + b^2",
optiuni: ["A = a * h / 2", "V = l^3", "A = d1 * d2 / 2"]
},
{
intrebare: "Care este aria unui triunghi echilateral?",
corect: "A = (l^2 * √3) / 4",
optiuni: ["A = ab * sin(θ)", "A = l * l", "A = πr^2"]
},
{
intrebare: "Formula ariei unui trapez este:",
corect: "A = (B + b) * h / 2",
optiuni: ["A = l * l", "A = πr^2", "A = ab * sin(θ)"]
}
];

function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
shuffle(intrebari);

let quiz = document.getElementById('quiz');


let scor = 0;

intrebari.forEach((q, index) => {


let toate = [q.corect, ...q.optiuni];
shuffle(toate);

let div = document.createElement('div');


div.classList.add('question');
div.innerHTML = `<p>${index + 1}. ${q.intrebare}</p>`;

let ans = document.createElement('div');


ans.classList.add('answers');

toate.forEach(opt => {
let btn = document.createElement('button');
btn.textContent = opt;
btn.onclick = () => {
if (btn.classList.contains("selected")) return;

document.querySelectorAll('.answers button').forEach(b => b.disabled = true);

if (opt === q.corect) {


btn.classList.add('correct');
scor++;
} else {
btn.classList.add('wrong');
}
document.getElementById('score').innerText = `Scor: ${scor} / $
{intrebari.length}`;
};
ans.appendChild(btn);
});

quiz.appendChild(div);
quiz.appendChild(ans);
});
</script>

</body>
</html>

You might also like