数据结构
网络
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 次浏览
广告