資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究建立測驗工具：完整新手指南
我們將構建一個簡單的互動式測驗工具，允許使用者回答問題、選擇答案並最終檢視分數。我們將使用 HTML、CSS 和 JavaScript 來實現這一點。
構建簡單測驗應用指南
- 步驟 1 - 設定 HTML：首先，建立一個 index.html 檔案作為我們測驗的基礎。此檔案將包含一個容器，用於顯示測驗問題、答案選項和提交按鈕。以下是一個簡單的入門結構。
- 步驟 2 - 使用 CSS 樣式化測驗：接下來，讓我們建立一個 style.css 檔案來新增一些基本樣式。這將有助於使我們的測驗在視覺上更具吸引力。以下是一些 CSS 入門程式碼。
- 步驟 3 - 使用 JavaScript 新增互動性：現在，讓我們建立一個 script.js 檔案，我們將在其中定義測驗問題以及處理使用者輸入和評分的邏輯。以下是一個基本設定
構建簡單測驗應用
HTML 程式碼
使用 HTML，我們只建立測驗應用的結構。
<h1>Quiz Game</h1>
<div id="question-container">
<h2 id="question">Question will appear here</h2>
<div id="options-container">
<label>
<input type="radio" name="answer" value="A">
<span id="optionA">Option A</span>
</label>
<label>
<input type="radio" name="answer" value="B">
<span id="optionB">Option B</span>
</label>
<label>
<input type="radio" name="answer"value="C">
<span id="optionC">Option C</span>
</label>
<label>
<input type="radio" name="answer" value="D">
<span id="optionD">Option D</span>
</label>
</div>
</div>
<button id="submit-btn">Submit</button>
<div id="result-container"></div>
CSS 程式碼
透過使用 CSS，我們將設計我們的測驗應用。
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f4f8;
}
.quiz-container {
text-align: center;
max-width: 500px;
width: 90%;
border: 2px solid #4a90e2;
padding: 20px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
#options-container label {
display: block;
margin: 10px 0;
}
#submit-btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
background-color: #4a90e2;
color: #fff;
border: none;
border-radius: 5px;
}
#result-container {
margin-top: 20px;
font-size: 18px;
}
JavaScript 程式碼
為了使測驗應用具有互動性，我們還將新增幾個問題。
const questions = [
{
question: "What is the capital of France?",
options: ["Paris", "London", "Berlin", "Madrid"],
answer: "A"
},
{
question: "Which planet is known as the Red Planet?",
options: ["Earth", "Venus", "Mars", "Jupiter"],
answer: "C"
},
{
question: "What is 2 + 2?",
options: ["3", "4", "5", "6"],
answer: "B"
}
];
let currentQuestionIndex = 0;
let score = 0;
// Load the first question
function loadQuestion() {
const currentQuestion = questions[currentQuestionIndex];
document.getElementById("question").innerText = currentQuestion.question;
document.getElementById("optionA").innerText = currentQuestion.options[0];
document.getElementById("optionB").innerText = currentQuestion.options[1];
document.getElementById("optionC").innerText = currentQuestion.options[2];
document.getElementById("optionD").innerText = currentQuestion.options[3];
}
// Check answer and update score
function checkAnswer() {
const selectedOption = document.querySelector('input[name="answer"]:checked');
if (selectedOption) {
const answer = selectedOption.value;
if (answer === questions[currentQuestionIndex].answer) {
score++;
}
currentQuestionIndex++;
selectedOption.checked = false;
if (currentQuestionIndex < questions.length) {
loadQuestion();
} else {
showResults();
}
} else {
alert("Please select an answer.");
}
}
// Display the final score
function showResults() {
document.getElementById("question-container").style.display = "none";
document.getElementById("submit-btn").style.display = "none";
document.getElementById("result-container").innerText = `Your score: ${score} out of ${questions.length}`;
}
// Event listener for submit button
document.getElementById("submit-btn").addEventListener("click", checkAnswer);
// Load the first question on page load
loadQuestion();
測驗應用完整程式碼
我們將結合上述程式碼，您可以將其儲存在單獨的檔案中，只需記住在 HTML 檔案中匯入這些檔案即可。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Quiz Tool</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f4f8;
}
.quiz-container {
text-align: center;
max-width: 500px;
width: 90%;
border: 2px solid #4a90e2;
padding: 20px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
#options-container label {
display: block;
margin: 10px 0;
}
#submit-btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
background-color: #4a90e2;
color: #fff;
border: none;
border-radius: 5px;
}
#result-container {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>Quiz Game</h1>
<div id="question-container">
<h2 id="question">Question will appear here</h2>
<div id="options-container">
<label><input type="radio" name="answer" value="A"> <span id="optionA">Option A</span></label>
<label><input type="radio" name="answer" value="B"> <span id="optionB">Option B</span></label>
<label><input type="radio" name="answer" value="C"> <span id="optionC">Option C</span></label>
<label><input type="radio" name="answer" value="D"> <span id="optionD">Option D</span></label>
</div>
</div>
<button id="submit-btn">Submit</button>
<div id="result-container"></div>
</div>
<script>
const questions = [{
question: "What is the capital of France?",
options: ["Paris", "London", "Berlin", "Madrid"],
answer: "A"
},
{
question: "Which planet is known as the Red Planet?",
options: ["Earth", "Venus", "Mars", "Jupiter"],
answer: "C"
},
{
question: "What is 2 + 2?",
options: ["3", "4", "5", "6"],
answer: "B"
}
];
let currentQuestionIndex = 0;
let score = 0;
// Load the first question
function loadQuestion() {
const currentQuestion = questions[currentQuestionIndex];
document.getElementById("question").innerText = currentQuestion.question;
document.getElementById("optionA").innerText = currentQuestion.options[0];
document.getElementById("optionB").innerText = currentQuestion.options[1];
document.getElementById("optionC").innerText = currentQuestion.options[2];
document.getElementById("optionD").innerText = currentQuestion.options[3];
}
// Check answer and update score
function checkAnswer() {
const selectedOption = document.querySelector('input[name="answer"]:checked');
if (selectedOption) {
const answer = selectedOption.value;
if (answer === questions[currentQuestionIndex].answer) {
score++;
}
currentQuestionIndex++;
selectedOption.checked = false;
if (currentQuestionIndex < questions.length) {
loadQuestion();
} else {
showResults();
}
} else {
alert("Please select an answer.");
}
}
// Display the final score
function showResults() {
document.getElementById("question-container").style.display = "none";
document.getElementById("submit-btn").style.display = "none";
document.getElementById("result-container").innerText = `Your score: ${score} out of ${questions.length}`;
}
// Event listener for submit button
document.getElementById("submit-btn").addEventListener("click", checkAnswer);
// Load the first question on page load
loadQuestion();
</script>
</body>
</html>
輸出
建立完所有檔案後，您可以執行本地伺服器以檢視您的互動式測驗。您可以看到測驗中有三個問題，並且也是互動式的。
更新於： 2024年11月5日
65 次瀏覽
廣告