IQ-Mega-Quiz 50

by LuckyFlare17

78 lines3.1 KB

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>IQ-Mega-Quiz 50</title>
    <style>
        body { font-family: 'Segoe UI', sans-serif; background: #fdfdfd; color: #444; display: flex; justify-content: center; padding: 20px; margin: 0; }
        #game { width: 100%; max-width: 500px; text-align: center; }
        .bar-bg { background: #eee; height: 10px; border-radius: 5px; margin-bottom: 20px; overflow: hidden; }
        #progress { background: #5c67f2; height: 100%; width: 0%; transition: width 0.3s; }
        h1 { color: #2d3436; font-size: 1.5em; }
        button { display: block; width: 100%; margin: 10px 0; padding: 16px; font-size: 16px; border: 2px solid #dfe6e9; background: #fff; border-radius: 12px; cursor: pointer; transition: 0.2s; }
        button:hover:not(:disabled) { border-color: #5c67f2; background: #f8f9ff; }
        .correct { background: #00b894 !important; color: white; border-color: #00b894; }
        .wrong { background: #d63031 !important; color: white; border-color: #d63031; }
    </style>
</head>
<body>

<div id="game">
    <div id="start">
        <h1>IQ-Mega-Quiz 🧠</h1>
        <p>Kannst du alle 50 Fragen meistern?</p>
        <button onclick="start()" style="background:#5c67f2; color:white;">Start (50 Fragen)</button>
    </div>
    <div id="quiz" style="display:none;">
        <div class="bar-bg"><div id="progress"></div></div>
        <div id="score">Punkte: 70</div>
        <h2 id="q-text"></h2>
        <div id="btns"></div>
    </div>
</div>

<script>
    let s = 70, i = 0;
    // Hier sind beispielhaft die ersten 50 Fragen-Strukturen
    const q = Array.from({length: 50}, (_, idx) => ({
        q: `Frage ${idx + 1}: Was ist ${idx + 2} + ${idx + 3}?`,
        o: [(idx+5-1).toString(), (idx+5).toString(), (idx+6).toString(), (idx+7).toString()],
        c: 1
    }));

    function start() {
        document.getElementById('start').style.display = 'none';
        document.getElementById('quiz').style.display = 'block';
        show();
    }

    function show() {
        let cur = q[i];
        document.getElementById('progress').style.width = (i / 50 * 100) + "%";
        document.getElementById('q-text').innerText = cur.q;
        let b = document.getElementById('btns'); b.innerHTML = '';
        cur.o.forEach((txt, idx) => {
            let btn = document.createElement('button');
            btn.innerText = txt;
            btn.onclick = () => check(btn, idx);
            b.appendChild(btn);
        });
    }

    function check(btn, idx) {
        let cur = q[i];
        let btns = document.querySelectorAll('#btns button');
        btns.forEach(b => b.disabled = true);
        if(idx === cur.c) { btn.classList.add('correct'); s += 2; }
        else { btn.classList.add('wrong'); btns[cur.c].classList.add('correct'); }
        document.getElementById('score').innerText = "Punkte: " + s;
        setTimeout(() => { i++; i < 50 ? show() : end(); }, 800);
    }

    function end() {
        document.getElementById('quiz').innerHTML = `<h1>Geschafft! 🎉</h1><p>Finaler Score: ${s}</p><button onclick="location.reload()">Nochmal</button>`;
    }
</script>
</body>
</html>

Game Source: IQ-Mega-Quiz 50

Creator: LuckyFlare17

Libraries: none

Complexity: moderate (78 lines, 3.1 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: iq-challenge-das-spiel-luckyflare17" to link back to the original. Then publish at arcadelab.ai/publish.