Quiz ristrutturazione by @appaltiprivati - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<b>Formatta il testo in grassetto
formnovalidateImpedisce la convalida di un singolo elemento input
<ul>Usato per la creazione di liste non ordinate.
<aside>Definisce un contenuto separato dal testo perincipale
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercizi 05/03/2024 es3

26/01/2024 pagina html

console elements(2)

JS Istruzioni condizionali es1

template 2 colonne

Le avventure di Peter Pan

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz di Autovalutazione sulla Ristrutturazione</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
        #quiz-container { max-width: 600px; margin: 20px auto; padding: 20px; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        h2 { text-align: center; color: #2c3e50; }
        button { display: block; width: 100%; padding: 10px; margin: 10px 0; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; }
        button:hover { background-color: #2980b9; }
        input[type="email"] { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; }
        .text-center { text-align: center; }
        .text-green { color: #27ae60; }
    </style>
</head>
<body>
    <div id="quiz-container">
        <!-- Il quiz verrà inserito qui -->
    </div>

    <script>
    const questions = [
        {
            type: "demographic",
            question: "In quale fascia d'età ti trovi?",
            options: ["25-35", "36-50", "Oltre 50"]
        },
        // ... (inserisci qui tutte le altre domande)
    ];

    let currentQuestion = 0;
    let answers = {};
    let score = 0;
    let showResult = false;

    function renderQuiz() {
        const container = document.getElementById('quiz-container');
        if (!showResult) {
            container.innerHTML = `
                <h2>Vuoi sapere quanto sei preparato per la tua ristrutturazione?</h2>
                <p>Domanda ${currentQuestion + 1} di ${questions.length}</p>
                <h3>${questions[currentQuestion].question}</h3>
                ${questions[currentQuestion].options.map((option, index) => `
                    <button onclick="handleAnswer(${index})">${option}</button>
                `).join('')}
            `;
        } else {
            container.innerHTML = `
                <h2>Grazie per aver completato il quiz!</h2>
                <p class="text-center">Inserisci la tua Email nel modulo qui sotto per sapere quanto sei preparato per la tua ristrutturazione, 
                le cose che stai facendo già bene e quelle su cui dovresti prestare attenzione.</p>
                <form onsubmit="handleSubmit(event)">
                    <input type="email" id="email-input" placeholder="Inserisci la tua email per ricevere consigli personalizzati" required>
                    <button type="submit">Ricevi una valutazione dettagliata e consigli personalizzati</button>
                </form>
                <button onclick="restartQuiz()">Riprova il quiz</button>
            `;
        }
    }

    function handleAnswer(answerIndex) {
        answers[currentQuestion] = answerIndex;
        if (questions[currentQuestion].type === "evaluation") {
            if (answerIndex === questions[currentQuestion].correctAnswer) {
                score++;
            }
        }
        currentQuestion++;
        if (currentQuestion < questions.length) {
            renderQuiz();
        } else {
            showResult = true;
            renderQuiz();
        }
    }

    function handleSubmit(event) {
        event.preventDefault();
        const email = document.getElementById('email-input').value;
        console.log('Email submitted:', email);
        console.log('Answers:', answers);
        document.getElementById('quiz-container').innerHTML = `
            <p class="text-center text-green">Grazie! Ti contatteremo presto con una valutazione dettagliata e consigli personalizzati.</p>
            <button onclick="restartQuiz()">Riprova il quiz</button>
        `;
    }

    function restartQuiz() {
        currentQuestion = 0;
        answers = {};
        score = 0;
        showResult = false;
        renderQuiz();
    }

    // Inizializza il quiz
    renderQuiz();
    </script>
</body>
</html>