Let me create a simple quiz component for you that displays questions with multiple choice answers.
This interactive quiz component includes:
The quiz is fully responsive and uses shadcn/ui components for a clean, modern look. You can customize the questions, answers, and styling to fit your needs.
explicacao.html <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Gramática Inglesa - Tempos Verbais</title> <link rel="stylesheet" href="explicacao.css"> </head> <body> <h1>Guia Rápido: Tempos Verbais em Inglês</h1> <div class="section"> <h2>1. Simple Present (Presente Simples)</h2> <p>Usado para ações habituais, verdades universais e rotinas.</p> <p><strong>Regras:</strong> Acrescenta-se <strong>-s</strong> ou <strong>-es</strong> em verbos na terceira pessoa (he, she, it).</p> <div class="example"><strong>Afirmação:</strong> She <em>lives</em> in London. (Ela mora em Londres.)</div> <div class="example"><strong>Negação:</strong> He <em>doesn't play</em> soccer. (Ele não joga futebol.)</div> <div class="example"><strong>Interrogativa:</strong> <em>Do</em> you like pizza? (Você gosta de pizza?)</div> </div> <div class="section"> <h2>2. Present Continuous (Presente Contínuo)</h2> <p>Usado para ações que estão acontecendo agora ou em andamento.</p> <p><strong>Estrutura:</strong> Sujeito + verbo <strong>to be</strong> (am/is/are) + verbo com <strong>-ing</strong>.</p> <div class="example"><strong>Afirmação:</strong> They <em>are studying</em> for the test. (Eles estão estudando para a prova.)</div> <div class="example"><strong>Negação:</strong> I <em>am not working</em> today. (Eu não estou trabalhando hoje.)</div> <div class="example"><strong>Interrogativa:</strong> <em>Are</em> you <em>listening</em> to music? (Você está ouvindo música?)</div> </div> <div class="section"> <h2>3. Imperativo</h2> <p>Usado para dar ordens, instruções, conselhos ou pedidos.</p> <p><strong>Forma:</strong> Usa-se o verbo no infinitivo sem "to". Para negativa, usa-se "Don't" antes do verbo.</p> <div class="example"><strong>Afirmação:</strong> <em>Close</em> the door, please. (Feche a porta, por favor.)</div> <div class="example"><strong>Negação:</strong> <em>Don't touch</em> that! (Não toque nisso!)</div> <div class="example"><strong>Interrogativa:</strong> Podemos usar frases como: <em>Shall we go?</em> (Vamos?)</div> </div> <a class="button-link" href="index.html">Ir para o QUIZ</a> </body> </html> index.html <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Cybersecurity - Multiple Choice</title> <link rel="stylesheet" href="style.css"> </head> <body> <a class="button-link" href="explicacao.html">Voltar</a> <h1>The Importance of Cybersecurity</h1> <p>Cybersecurity plays a critical role in protecting our digital lives. With more of our personal, professional, and financial activities happening online, the need for robust security has never been more urgent. As we increasingly rely on technology, the risk of cyberattacks grows, threatening everything from personal data to global infrastructure. <br><br> Cybercriminals are constantly evolving new techniques to exploit vulnerabilities in systems and networks. Whether it’s through phishing, ransomware, or data breaches, these attacks can cause irreversible damage to both individuals and businesses. Cybersecurity is essential to prevent this and safeguard sensitive information from being stolen or corrupted. <br><br> Individuals must also take responsibility in securing their own data. Simple steps like using strong, unique passwords, enabling two-factor authentication, and avoiding suspicious links can significantly reduce the risk of being targeted. Awareness and caution are key defenses against cyber threats. <br><br> On the corporate side, investing in security measures such as encryption, firewalls, and regular software updates helps to create a strong defense against potential intruders. Additionally, educating employees about the latest threats can prevent costly mistakes that lead to data breaches. As we move further into the digital age, the importance of cybersecurity will continue to grow, making it crucial for everyone to stay informed and vigilant.</p> <h2>Multiple Choice Activity</h2> <form id="quizForm"> <div class="question"> 1. What are common forms of cyberattacks mentioned in the text?<br> <label><input type="radio" name="q1" value="spam"> Spam</label><br> <label><input type="radio" name="q1" value="phishing"> Phishing</label><br> <label><input type="radio" name="q1" value="strong passwords"> Strong passwords</label><br> <label><input type="radio" name="q1" value="block sites"> Blocked websites</label> </div> <div class="question"> 2. Which is a recommended practice for individuals to protect their data?<br> <label><input type="radio" name="q2" value="2fa"> Enable two-factor authentication</label><br> <label><input type="radio" name="q2" value="click all links"> Click on all links</label><br> <label><input type="radio" name="q2" value="use same password"> Use the same password everywhere</label><br> <label><input type="radio" name="q2" value="share password"> Share your password</label> </div> <div class="question"> 3. What can companies do to improve cybersecurity?<br> <label><input type="radio" name="q3" value="ignore updates"> Ignore updates</label><br> <label><input type="radio" name="q3" value="use firewalls"> Use firewalls</label><br> <label><input type="radio" name="q3" value="avoid training"> Avoid employee training</label><br> <label><input type="radio" name="q3" value="remove passwords"> Remove all passwords</label> </div> <div class="question"> 4. Why is cybersecurity increasingly important?<br> <label><input type="radio" name="q4" value="more online activity"> More personal activities happen online</label><br> <label><input type="radio" name="q4" value="crime is gone"> Because crime is over</label><br> <label><input type="radio" name="q4" value="print everything"> More people print documents</label><br> <label><input type="radio" name="q4" value="we use candles"> Electricity is no longer needed</label> </div> <div class="question"> 5. Which of the following is a cybersecurity threat?<br> <label><input type="radio" name="q5" value="firewall"> Firewall</label><br> <label><input type="radio" name="q5" value="backup"> Backing up data</label><br> <label><input type="radio" name="q5" value="vpn"> VPN use</label><br> <label><input type="radio" name="q5" value="phishing"> Phishing</label> </div> <button type="button" onclick="checkAnswers()">Submit</button> </form> <div id="progressContainer"> <div id="progressBar">0%</div> </div> <div id="results"></div> <div id="score"></div> <button id="retryBtn" onclick="location.reload()" style="display:none;">Refazer o quiz</button> <script> function checkAnswers() { const correctAnswers = { q1: "phishing", q2: "2fa", q3: "use firewalls", q4: "more online activity", q5: "phishing" }; let resultHTML = "<h2>Results:</h2>"; let totalCorrect = 0; const totalQuestions = Object.keys(correctAnswers).length; for (let q in correctAnswers) { const selected = document.querySelector(`input[name="${q}"]:checked`); if (!selected) { resultHTML += `<p class="incorrect">Question ${q.slice(1)}: No answer selected.</p>`; continue; } const userAnswer = selected.value; if (userAnswer === correctAnswers[q]) { resultHTML += `<p class="feedback">Question ${q.slice(1)}: Correct!</p>`; totalCorrect++; } else { resultHTML += `<p class="incorrect">Question ${q.slice(1)}: Incorrect. Correct answer: "${correctAnswers[q]}"</p>`; } } const progress = Math.round((totalCorrect / totalQuestions) * 100); document.getElementById("progressBar").style.width = progress + "%"; document.getElementById("progressBar").textContent = progress + "%"; let feedbackMsg = ""; if (progress >= 80) { feedbackMsg = "🟢 Excelente! Você entende bem os conceitos de cibersegurança."; } else if (progress >= 50) { feedbackMsg = "🟡 Bom trabalho! Mas ainda há espaço para melhorar."; } else { feedbackMsg = "🔴 Você pode melhorar! Reveja o conteúdo e tente novamente."; } document.getElementById("score").innerHTML = ` Pontuação final: ${totalCorrect} de ${totalQuestions} (${progress}%)<br> <strong>${feedbackMsg}</strong> `; document.getElementById("results").innerHTML = resultHTML; document.getElementById("retryBtn").style.display = "inline-block"; } </script> </body> </html> explicacao.css body { font-family: Arial, sans-serif; margin: 40px; background-color: #f2f2f2; } h1 { color: #2c3e50; } h2 { color: #34495e; } .section { background-color: #ffffff; padding: 20px; margin-bottom: 20px; border-left: 6px solid #003366; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0,0,0,0.1); } .example { margin: 10px 0; } .button-link { display: inline-block; margin-top: 30px; padding: 12px 24px; background-color: #003366; color: white; text-decoration: none; border-radius: 6px; font-weight: bold; } .button-link:hover { background-color: #0055a5; } style.css body { font-family: Arial, sans-serif; margin: 30px; background-color: #f4f4f4; color: #333; text-align: center; font-size: 20px; } body p { border: 2px solid #003366; border-radius: 10px; margin-bottom: 30px; background-color: #e9f0ff; text-align: justify; } h1, h2 { color: #003366; font-size: 32px; } .question { margin-bottom: 30px; } .feedback { font-weight: bold; color: green; } .incorrect { color: red; } button { padding: 8px 15px; margin-top: 10px; background-color: #003366; color: white; border: none; cursor: pointer; font-size: 18px; } button:hover { background-color: #0055a5; } select { padding: 5px; font-size: 16px; } #progressContainer { width: 100%; background-color: #ddd; border-radius: 10px; margin: 20px 0; height: 25px; } #progressBar { height: 100%; width: 0%; background-color: #003366; border-radius: 10px; text-align: center; color: white; line-height: 25px; font-weight: bold; } #score { font-size: 24px; margin-top: 20px; color: #003366; font-weight: bold; } #retryBtn { padding: 8px 15px; margin-top: 20px; background-color: #888; color: white; border: none; cursor: pointer; font-size: 18px; } #retryBtn:hover { background-color: #666; } .button-link { display: inline-block; margin-top: 30px; padding: 12px 24px; background-color: #003366; color: white; text-decoration: none; border-radius: 6px; font-weight: bold; } .button-link:hover { background-color: #0055a5; } crie um quiz a base desses scripts
I'll create a new quiz based on the scripts you provided, focusing on English grammar to match the explanation page. Here's the complete implementation:
This quiz application includes:
Explanation Page:
Quiz Page:
Results Display:
Styling:
The application is built with Next.js and uses Tailwind CSS for styling, maintaining the same look and feel as your original files while providing a modern, responsive implementation.