让我努力正确地解释我编写的小代码的目的。
我的意图是用两个选项和一个外部提交按钮进行一个单问题测试，但我想在这两种情况下都使用div测试容器；考虑到我想事先插入一个名字，然后再做测验。
当谈到JavaScript时，我是一个初学者，我只是无法制作专门针对这两种选择的单选按钮，并使一切正常工作。这是我的密码。
HTML
<body>
<p class="mini_container">
Is it a bother if I quiz you a bit?
</p>
<div class="quiz-container">
<span class="name">Drop your name here</span>
<form id="name">
<input type="text" id="name-text">
<button type="submit" id="submit-button">Submit</button>
</form>
</div>
<div class="submit_button_2">
<button type="submit" id="submit_2">Submit</button>
</div>
</body>
CSS
body {
background: #011910;
}
.quiz-container {
width: 500px;
height: 200px;
background: #a6a6a6;
text-align: justify;
margin: 0 auto;
box-shadow: 10px 10px 10px 5px rgb(3, 125, 80);
border-radius: 12px;
font-size: 30px;
color: rgb(52, 0, 52);
text-align: center;
padding-top: 95px;
}
.answers label {
display: block;
}
input {
font-size: 20px;
width: 490px;
height: 50px;
border-color: rgb(230, 230, 230);
opacity: 0.5;
border-radius: 7px;
}
button {
font-size: 20px;
color:rgb(1,25,16);
opacity: 0.7;
background-color:rgb(144,238,160);
border: 9px rgb(255,189,182);
border-radius: 15px;
}
button:hover {
border: 20px rgb(255,189,182);
border-radius: 15px;
opacity: 0.5;
}
.mini_container {
background: #b4ecb4;
box-shadow: 10px 10px 10px 5px rgb(3, 125, 80);
opacity: 0.5;
width: 200px;
height: 45px;
align-items: center;
margin: auto;
margin-top: 100px;
border-radius: 5px;
padding-left: 30px;
padding-right: 35px;
}
p {
text-align: left;
font-size: 19px;
margin-top: 100px;
text-shadow: 1px 4px rgb(254, 254, 227);
}
.buttons {
font-size: 20px;
width: 490px;
height: 50px;
border-color: rgb(230, 230, 230);
opacity: 0.5;
border-radius: 7px;
margin: auto;
display: block;
}
.submit_button_2 {
font-size: 20px;
width: 490px;
height: 50px;
border-color: rgb(230, 230, 230);
opacity: 0.5;
border-radius: 7px;
margin: auto;
display: block;
padding-top: 30px;
}
JavaScript
var name = "";
var quizQuestion = {
question: "Do the Brazilians speak...",
alternatives: {
1: "Brazilian Portuguese",
2: "Spanish"
},
correctAnswer: "1",
incorrectAnswer: "2"
};
我将提交按钮放在表单中，并在用户提交姓名后添加Javascript来填充quiz-container。有一个事件处理程序可以让用户知道他们的答案是对是错。
var name = "";
var quizQuestion = {
question: "Do the Brazilians speak...",
alternatives: {
1: "Brazilian Portuguese",
2: "Spanish"
},
correctAnswer: "1",
incorrectAnswer: "2"
};
document.getElementById('name').addEventListener('submit', function() {
let container = document.querySelector('.quiz-container');
container.innerHTML = '<form id="quiz">';
for (const [key, value] of Object.entries(quizQuestion.alternatives)) {
container.innerHTML += `<input type="radio" name="choice" value="${key}"> ${value}`;
}
container.innerHTML += '<button id="submit2" type="submit">Submit</button></form>';
document.getElementById('submit2').addEventListener('click', function(e) {
console.log('asdf')
e.preventDefault();
var selected = document.querySelector('input[type="radio"]:checked');
if ( selected && selected.value == quizQuestion.correctAnswer ) {
alert('Right!');
} else {
alert('Wrong!');
}
});
})body {
background: #011910;
}
.quiz-container {
width: 500px;
height: 200px;
background: #a6a6a6;
text-align: justify;
margin: 0 auto;
box-shadow: 10px 10px 10px 5px rgb(3, 125, 80);
border-radius: 12px;
font-size: 30px;
color: rgb(52, 0, 52);
text-align: center;
padding-top: 95px;
}
.answers label {
display: block;
}
input {
font-size: 20px;
width: 490px;
height: 50px;
border-color: rgb(230, 230, 230);
opacity: 0.5;
border-radius: 7px;
}
button {
font-size: 20px;
color:rgb(1,25,16);
opacity: 0.7;
background-color:rgb(144,238,160);
border: 9px rgb(255,189,182);
border-radius: 15px;
}
button:hover {
border: 20px rgb(255,189,182);
border-radius: 15px;
opacity: 0.5;
}
.mini_container {
background: #b4ecb4;
box-shadow: 10px 10px 10px 5px rgb(3, 125, 80);
opacity: 0.5;
width: 200px;
height: 45px;
align-items: center;
margin: auto;
margin-top: 100px;
border-radius: 5px;
padding-left: 30px;
padding-right: 35px;
}
p {
text-align: left;
font-size: 19px;
margin-top: 100px;
text-shadow: 1px 4px rgb(254, 254, 227);
}
.buttons {
font-size: 20px;
width: 490px;
height: 50px;
border-color: rgb(230, 230, 230);
opacity: 0.5;
border-radius: 7px;
margin: auto;
display: block;
}
.submit_button_2 {
font-size: 20px;
width: 490px;
height: 50px;
border-color: rgb(230, 230, 230);
opacity: 0.5;
border-radius: 7px;
margin: auto;
display: block;
padding-top: 30px;
}<p class="mini_container">
Is it a bother if I quiz you a bit?
</p>
<div class="quiz-container">
<span class="name">Drop your name here</span>
<form id="name">
<input type="text" id="name-text">
<button type="submit" id="submit-button">Submit</button>
</form>
</div>// Javascript:
// I Use Jquery for you to easily understand the codes in it and i have added some comments also to indicate what's going On.
//
// first i Imported the Jquery cdn
// Let the All other Documents Load Well before loading the Jquery code
$(document).ready(function() {
// Once the Continue Button is Clicked, Do this
$("#next").click(function() {
$(".languages").toggle();
$(".namer").toggle();
});
// Once the Back Button Is Clicked, Do this
$("#prev").click(function() {
$(".languages").toggle();
$(".namer").toggle();
});
// Check for the Radio Button if Its Correct
$("button").click(function(event) {
// Prevent form submit on the browser
event.preventDefault();
// check for the correct option and give the right result
var checked = $("input[name=language]:checked");
if (checked.val() == "yes") {
alert("You're Very Correct");
} else {
alert("You're Wrong");
}
});
});/* CSS:
in the css code, i made some adjustments, I have commented on the newly adjusted codes below: */
body {
background: #011910;
}
.quiz-container {
width: 500px;
background: #a6a6a6;
text-align: justify;
margin: 0 auto;
box-shadow: 10px 10px 10px 5px rgb(3, 125, 80);
border-radius: 12px;
font-size: 30px;
color: rgb(52, 0, 52);
text-align: center;
padding-top: 95px;
}
.answers label {
display: block;
}
input {
font-size: 20px;
width: 490px;
height: 50px;
border-color: rgb(230, 230, 230);
opacity: 0.5;
border-radius: 7px;
}
/* Newly added */
.btn {
font-size: 20px;
color: rgb(1, 25, 16);
opacity: 0.7;
background-color: rgb(144, 238, 160);
border: 9px rgb(255, 189, 182);
border-radius: 15px;
}
/* Newsly Added */
btn:hover {
border: 20px rgb(255, 189, 182);
border-radius: 15px;
opacity: 0.5;
}
button {
font-size: 20px;
color: rgb(1, 25, 16);
opacity: 0.7;
background-color: rgb(144, 238, 160);
border: 9px rgb(255, 189, 182);
border-radius: 15px;
}
button:hover {
border: 20px rgb(255, 189, 182);
border-radius: 15px;
opacity: 0.5;
}
.mini_container {
background: #b4ecb4;
box-shadow: 10px 10px 10px 5px rgb(3, 125, 80);
opacity: 0.5;
width: 200px;
height: 45px;
align-items: center;
margin: auto;
margin-top: 100px;
border-radius: 5px;
padding-left: 30px;
padding-right: 35px;
}
p {
text-align: left;
font-size: 19px;
margin-top: 100px;
text-shadow: 1px 4px rgb(254, 254, 227);
}
.buttons {
font-size: 20px;
width: 490px;
height: 50px;
border-color: rgb(230, 230, 230);
opacity: 0.5;
border-radius: 7px;
margin: auto;
display: block;
}
.submit_button_2 {
font-size: 20px;
width: 490px;
height: 50px;
border-color: rgb(230, 230, 230);
opacity: 0.5;
border-radius: 7px;
margin: auto;
display: block;
padding-top: 30px;
}
/* Newsly Added */
.languages {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<!-- i Tweek some of your codes Here
HTML
In HTML code, i created different Divs for different sections adding all the codes to your already created quiz-container container. -->
<p class="mini_container">
Is it a bother if I quiz you a bit?
</p>
<div class="quiz-container">
<form id="name">
<div class="namer">
<span class="name">Drop your name here</span>
<input type="text" id="name-text" name="name">
<input type="button" class="btn" id="next" value="Continue">
</div>
<div class="languages">
<span>Do the Brazilians speak...</span>
<input type="radio" id="yes" name="language" value="yes">
<label for="yes">Yes</label><br>
<input type="radio" id="no" name="language" value="no">
<label for="no">No</label><br>
<input type="button" class="btn" id="prev" value="Back">
<div class="submit_button_2">
<button type="submit" class="btn" id="submit_2">Submit</button>
</div>
</div>
</form>
</div>
</body>