このプロジェクトは、HTML、CSS、および JavaScriptシンプルなインタラクティブなクイズ アプリケーションです。 🎜>。これにより、ユーザーは多肢選択式の質問に回答し、回答を送信して、即時にスコアを受け取ることができます。このアプリは、JavaScript での基本的なフォーム処理、動的なコンテンツ更新、DOM 操作を示します。
quiz-app/ │-- index.html ← The HTML structure │-- styles.css ← The CSS styling └-- script.js ← The JavaScript logic
主要要素:
<form> <h3> ? <strong>CSS (styles.css)</strong> </h3> <p>The CSS file styles the quiz interface, making it visually appealing and responsive.</p> <p><strong>Key Styling Concepts:</strong></p>
button { background-color: #28a745; color: #fff; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #218838; }
主要な概念:
document.getElementById('submit-btn').addEventListener('click', function() { const answers = { q1: 'Paris', q2: '4', q3: 'Blue' }; let score = 0; const form = document.getElementById('quiz-form'); if (form.q1.value === answers.q1) score++; if (form.q2.value === answers.q2) score++; if (form.q3.value === answers.q3) score++; document.getElementById('result').textContent = `You scored ${score} out of 3!`; });
HTML フォームと入力:
CSS スタイル:
JavaScript インタラクティブ性:
quiz-app/ │-- index.html ← The HTML structure │-- styles.css ← The CSS styling └-- script.js ← The JavaScript logic
<form> <h3> ? <strong>CSS (styles.css)</strong> </h3> <p>The CSS file styles the quiz interface, making it visually appealing and responsive.</p> <p><strong>Key Styling Concepts:</strong></p>
button { background-color: #28a745; color: #fff; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #218838; }
以上がインタラクティブなクイズアプリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。