Quiz ristrutturazione by @appaltiprivati - Codewith.it

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

References

<ol>Crea liste ordinate o numerate.
<em>Formatta il testo in corsivo/italico enfatizzato
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<h2>Titolo di intestazione di secondo livello
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
forSpecifica a quale id è associato l'elemento in cui è dichiarato.

Users

Log in to search for users

Explore

Find inspiration

project-freecodecamp.org

Livia e la Foresta Incantata

BasicStructure.html

Deutsch Plus [Link]

Campagna in primavera

DEMO: Hi-Lo Game

Esercio-selettori-di-relazione

GreenBox - Giardinaggio a casa tua

Unity WebGL Player | Hollow Knight

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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; margin: 0; padding: 20px; }
        #quiz-container { max-width: 600px; margin: 0 auto; background-color: #f9f9f9; border-radius: 8px; padding: 20px; 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; box-sizing: border-box; }
        .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"]
        },
        {
            type: "demographic",
            question: "Che tipo di proprietà intendi ristrutturare?",
            options: ["Appartamento", "Casa indipendente", "Villa", "Altro"]
        },
        {
            type: "demographic",
            question: "Qual è il budget previsto per la tua ristrutturazione?",
            options: ["Meno di 50.000€", "50.000€ - 100.000€", "Oltre 100.000€"]
        },
        {
            type: "demographic",
            question: "Quando prevedi di iniziare i lavori?",
            options: ["Entro 3 mesi", "Entro 6 mesi", "Entro 1 anno", "Non ho ancora deciso"]
        },
        {
            type: "evaluation",
            question: "Hai definito chiaramente gli obiettivi della tua ristrutturazione?",
            options: ["Sì, ho un progetto di ristrutturazione chiaro", "Ho un'idea generale", "Non ancora"],
            correctAnswer: 0
        },
        {
            type: "evaluation",
            question: "Hai stabilito un budget realistico, includendo una quota per imprevisti?",
            options: ["Sì, con una riserva del 15-20%", "Ho un budget ma senza riserva", "Non ho ancora un budget definito"],
            correctAnswer: 0
        },
        {
            type: "evaluation",
            question: "Hai nominato un Direttore dei lavori?",
            options: ["Sì, l'ho nominato", "Ancora non l'ho nominato", "Non sapevo di doverlo fare"],
            correctAnswer: 0
        },
        {
            type: "evaluation",
            question: "Hai selezionato un professionista (architetto o designer) per il tuo progetto?",
            options: ["Sì, ho già scelto", "Sto valutando alcune opzioni", "Non ancora"],
            correctAnswer: 0
        },
        {
            type: "evaluation",
            question: "Hai verificato la necessità di permessi edilizi per i tuoi lavori?",
            options: ["Sì, so esattamente cosa mi serve", "Ne ho un'idea generale", "Non ho ancora controllato"],
            correctAnswer: 0
        },
        {
            type: "evaluation",
            question: "Hai richiesto e confrontato preventivi da diverse imprese edili?",
            options: ["Sì, almeno tre preventivi dettagliati", "Ho un solo preventivo", "Non ancora"],
            correctAnswer: 0
        },
        {
            type: "evaluation",
            question: "Hai un contratto dettagliato con l'impresa che include almeno pagamenti ad avanzamento lavori, garanzie per lavori male eseguiti, tempistiche certe, penali, verifica e collaudo?",
            options: ["Sì, ho un contratto completo", "Ho un accordo generico", "Non ancora"],
            correctAnswer: 0
        },
        {
            type: "evaluation",
            question: "Hai pianificato come supervisionare i lavori e comunicare con l'impresa?",
            options: ["Sì, ho un piano di comunicazione", "Ci penserò quando inizieranno i lavori", "Non ci ho pensato"],
            correctAnswer: 0
        },
        {
            type: "evaluation",
            question: "Sei consapevole della documentazione necessaria al termine dei lavori (certificazioni, conformità)?",
            options: ["Sì, so esattamente cosa mi servirà", "Ne ho un'idea generale", "Non ne sono a conoscenza"],
            correctAnswer: 0
        }
    ];

    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>