Divisions dues xifres

<title>Divisió amb els Monstres del Circ</title>

    body {
        font-family: 'Comic Sans MS', cursive;
        background-color: #ffefd5;
        text-align: center;
        color: #333;
    }
    h1 {
        color: #d62828;
        font-size: 2.5em;
        margin-top: 20px;
        animation: bounce 1.5s infinite;
    }
    .circ-container {
        background: #fcbf49;
        border: 5px dashed #d62828;
        padding: 20px;
        border-radius: 15px;
        width: 80%;
        margin: auto;
        box-shadow: 0 0 15px #f77f00;
    }
    .step {
        display: none;
        margin: 15px 0;
        padding: 15px;
        background: #fff3e0;
        border-radius: 10px;
        font-size: 1.2em;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.8s ease;
    }
    .step.show {
        display: block;
        opacity: 1;
        transform: translateY(0);
        animation: fadeIn 1s ease;
    }
    .btn {
        background-color: #d62828;
        color: white;
        border: none;
        padding: 10px 20px;
        margin: 10px;
        font-size: 1em;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    .btn:hover {
        background-color: #f77f00;
    }
    img.monstre {
        width: 100px;
        margin: 10px;
        animation: wiggle 2s infinite;
    }
    /* Animacions */
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes wiggle {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(5deg); }
        75% { transform: rotate(-5deg); }
    }




<h1>🎪 Aprenem a dividir amb els Monstres del Circ!</h1>
<div class="circ-container">
    <p><strong>Problema:</strong> 1.248 ÷ 24 = ?</p>
    <div id="steps">
        <div class="step" id="step1">
            URL_MONSTRE1
            🧩 <strong>Pas 1:</strong> Escriu la divisió llarga: <br> <code>24 | 1248</code>
        </div>
        <div class="step" id="step2">
            URL_MONSTRE2
            🔍 <strong>Pas 2:</strong> Mira les primeres xifres (124). Quants 24 caben? → 5 vegades.
        </div>
        <div class="step" id="step3">
            URL_MONSTRE3
            📉 <strong>Pas 3:</strong> Restem: 124 - 120 = 4. Baixem el 8 → ara tenim 48.
        </div>
        <div class="step" id="step4">
            URL_MONSTRE4
            ✅ <strong>Pas 4:</strong> 24 cap 2 vegades en 48. Resultat final: <strong>52</strong>.
        </div>
        <div class="step" id="step5">
            URL_MONSTRE5
            🎉 <strong>Comprovació:</strong> 52 × 24 = 1.248 → Correcte!
        </div>
    </div>
    <button class="btn">Mostra el següent pas</button>
</div>


    let currentStep = 0;
    function showNextStep() {
        const steps = document.querySelectorAll('.step');
        if (currentStep &lt; steps.length) {
            steps[currentStep].classList.add('show');
            currentStep++;
        } else {
            alert('Has completat tots els passos! 🎪');
        }
    }