倒计时并替换错误答案
Countdown and replace on wrongAnswer
我正在制作一个测验应用程序，但我不知道如何进行特定活动。一开始我想做的是显示 3 颗心，作为对塞尔达的敬意，然后擦除并添加 10 颗心。每次问题回答错误时，它都会移除一颗心并用一颗空心代替它。问题是我无法弄清楚如何将它添加到 10 中并进行替换。任何帮助，将不胜感激！谢谢。
const STORE = [
//Question 1
{
question: `Who is the Sage of Shadows in Ocarina of Time?`,
choices: [
`Princess Zelda`,
`Saria`,
`Darunia`,
`Impa`],
answer: `Impa`,
},
//Question 2
{
question: `What is the fairies name that follows the Hero in Majora’s Mask?`,
choices: [
`Tatl`,
`Termina`,
`Twinmold`,
`Tael`],
answer: `Tatl`,
},
//Question 3
{
question: `What is the first Zelda game that the Hero was an adult the whole game?`,
choices: [
`Breath of the Wild`,
`Ocarina of Time`,
`Twilight Princess`,
`Wind Waker`],
answer: `Twilight Princess`,
},
//Question 4
{
question: `Finish this quote: “Courage need not be remembered, …”`,
choices:[
`for it is never lost.`,
`for it is never forgotten.`,
`because it is proven.`,
`for it is always there.`],
answer:`for it is never forgotten.`,
},
//Question 5
{
question: `The Legend of Zelda(NES) is known for being the first video game that…`,
choices:[
`had music.`,
`allowed saving.`,
`had color.`,
`was released on the NES.`],
answer: `allowed saving.`,
},
//Question 6
{
question: `Who is the main antagonist a majority of The Legend of Zelda series?`,
choices:[`Ganon`,
`Zant`,
`Ghirahim`,
`Majora`],
answer: `Ganon`,
},
//Question 7
{
question: `Which of The Legend of Zelda games was the first to not have the usual main villain?`,
choices:[`Minish Cap`, `Skyward Sword`, `The Legend of Zelda II`, `Majora’ s Mask`],
answer: `The Legend of Zelda II`,
},
//Question 8
{
question:`What is the Hero’ s name ?`,
choices:[
`Zelda`,
`Link`,
`Epona`,
`Shiek`
],
answer:`Link`,
},
//Question 9
{
question: `How many hearts do you need in Breath of the Wild to get the Master Sword?`,
choices:[`13`, `10`, `20`, `15`],
answer: `13`,
},
//Question 10
{
question: `Who develops the Legend of Zelda(series)?`,
choices:[`Sony`, `Microsoft`, `Sega`, `Nintendo`],
answer:`Nintendo`,
}
];
const OUTCOMES = {
perfect: {
message: `You are worthy of holding the Master Sword at it's full power!`,
endImage: `images/fullpowermastersword.png`
},
great: {
message: `You are worthy of holding the Master Sword but it isn't at it's full potential.`,
endImage: `images/mastersword.png`
},
good: {
message: `You have drawn the Master Sword but it's damaged. Return it to the pedastal and try again.`,
endImage: `images/rustedmastersword.png`
},
fail: {
message: `You are not worthy. Here's a stick.`,
endImage: `images/treebranch.png`
},
}
let hearts = 10;
let brokenPots = 0;
function startQuest() {
$('#quizcontainer').on('click', '.startbutton', function (event) {
$('#quizcontainer').empty();
$('.potCounter').empty();
$('.potCounter').html(`<h1><span>Question:<span class ="brokenPots">0</span>/10</span></h1>`);
$('.brokenPots').text(1);
$('.heartcontainer').empty();
generateHearts();
$('#quizcontainer').append(generateQuestion());
});
}
function generateQuestion() {
if (brokenPots < STORE.length) {
return generateQuiz(brokenPots);
} else {
$('#quizcontiner').empty();
heartsRemaining();
$('.brokenPots').text(10);
}
}
function generateQuiz(questionIndex) {
let dungeonMaker = $(`<form>
<fieldset class="choices">
<legend class="questionText">${STORE[questionIndex].question}</legend><br>
</fieldset>
</form>`)
let fieldFinder = $(dungeonMaker).find('fieldset');
STORE[questionIndex].choices.forEach(function (choicesValue, choicesIndex) {
$(`<label class="choices" for="${choicesIndex}">
<input type="radio" class="select" id="${choicesIndex}" value="${choicesValue}" name="answer" required>
<span>${choicesValue}</span>
</label>
`).appendTo(fieldFinder);
});
$(`<br><button type="submit" class="submitButton press">Submit</button >`).appendTo(fieldFinder);
return dungeonMaker;
}
function submitChoice() {
$('#quizcontainer').on('submit', function (event) {
const chosen = $('input:checked');
const choice = chosen.val();
const correct = STORE[brokenPots].answer;
if (choice === correct) {
correctChoice();
} else {
wrongChoice();
}
});
}
function correctChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>Correct!</h3>
<br>
<button type="button" class="nextButton press">Next</button>`
)
}
function wrongChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>You took some damage.</h3>
<span class="next">Correct Answer is:</span>
<span class="next">${STORE[brokenPots].answer}</span>
<br>
<button type="button" class="nextButton press">Next</button>`
);
updateHearts();
}
function nextQuestion() {
$('#quizcontainer').on('click', '.nextButton', function (event) {
$('#quizcontainer').empty();
updatePotsBroken();
$('#quizcontainer').append(generateQuestion());
});
}
function updatePotsBroken() {
brokenPots++;
$('.brokenPots').text(brokenPots + 1);
}
function generateHearts() {
if ($('.hearts') < hearts) {
for (i = 1; i <= hearts; i++) {
$('.heartcontainer').append(`<img class='hearts' src="images/full.png">`);
}
}
}
function updateHearts() {
hearts--;
$('.heartcontainer').slice('.hearts').append(`<img class='empty' src = 'images/empty.png'>`);
}
function heartsRemaining() {
const questResult = countHearts();
return (`<h1>${questResult.message}</h1>`)
}
function countHearts() {
if (hearts === 10) {
return OUTCOMES.perfect;
} else if (hearts < 9 && hearts >= 7) {
return OUTCOMES.great;
} else if (hearts < 6 && hearts >= 3) {
return OUTCOMES.good;
} else {
return OUTCOMES.fail;
}
}
function restartQuest() {
hearts = 10;
brokenPots = 0;
generateHearts();
$('.brokenPots').text(0);
}
function handledrawSword() {
startQuest();
generateQuestion();
submitChoice();
nextQuestion();
restartQuest();
}
$(handledrawSword);
* {
box-sizing: border-box;
border: 0;
padding: 0;
margin: 0;
cursor: url('images/cursor.gif'), auto;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
background-color: #5A8C58;
color: #F2C46D;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
main {
flex-grow: 1;
}
header,
main,
footer {
flex-shrink: 0;
}
.pagecontainer {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
main{
display: flex;
justify-content:center;
flex-direction: column;
}
.border{
margin: 10px 5px 10px 5px;
border: medium;
border-style: solid;
border-color: black;
background-color:#D9D3B4;
}
.background-image{
background-image: url("images/shield.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.headercontainer {
font-family: 'Press Start 2P', cursive;
font-size: 10px;
margin: 5px 10px 10px 10px;
}
.heartcontainer{
min-height: 35px;
}
.empty,
.hearts{
margin: 7px 0px 0px 0px;
height:20px;
}
#quizcontainer{
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
min-width: 300px;
min-height: 300px;
}
.choices
{
display: block;
}
.centercontainer{
display: flex;
justify-content:center;
flex-direction: row;
margin: 10px 0px 10px 0px;
}
.contactcontainer{
display: flex;
max-width: 500px;
flex-flow: row wrap;
justify-content: center;
align-content: center;
list-style: none;
}
.contactinfo {
height: 30px;
width: 30px;
margin: 0px 25px 0px 25px;
}
.press{
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
font-size: 20px;
width: 4em;
height: 2em;
border: 3px;
border-style: outset;
color: #F2C46D;
background-color:#E8591A;
margin: 5px 0px 5px 0px;
}
.press:active{
border: 3px;
border-style: inset;
}
.press:hover {
background-color:#BD4715;
}
@media only screen and (min-width: 540px) {}
@media only screen and (min-width: 769px) {
main{
display: flex;
justify-content:center;
flex-direction: column;
min-width: 770px;
min-height: 770px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P|Roboto:700&display=swap" rel="stylesheet">
<title>Legend of Zelda: Quiz</title>
</head>
<body>
<div class="pagecontainer">
<main>
<div class="count border">
<header>
<div class="headercontainer potCounter">
<br>
<h1>Are you Worthy of the Master Sword?</h1>
</div>
</header>
</div>
<div class="health border">
<section>
<div class="heartcontainer">
<img src=images/full.png class='empty'>
<img src=images/full.png class='empty'>
<img src=images/full.png class='empty'>
</div>
</section>
</div>
<div class="quiz border background-image">
<section>
<div id="quizcontainer">
<div class="startcontainer">
<span>
Test your knowlodge on "The Legend Zelda Series" to see if you are worthy of
wielding the Master Sword!
</span>
<br>
<br>
<button class="press startbutton">Start</button>
</div>
</section>
</div>
</main>
<footer>
<div class="centercontainer">
<div class="border">
<ul class="contactcontainer">
<li><a href="mailto:#" target="_top"><img src="images/email.png"
class="contactinfo" alt="Email Icon" /></a></li>
<li><a href="#" target="_blank"><img src="images/webpage.png" class="contactinfo"
alt="Website Icon" /></a></li>
<li><a href="#" target="_blank"><img
src="images/linkedin.png" class="contactinfo" alt="LinkedIn Icon" /></a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="STORE.js"></script>
<script src="script.js"></script>
</div>
</body>
</html>
为了帮助您，我用 font-awesome 的图标更改了您的图标。不是因为使用图片错误，而是因为我看不到你的图片。
我主要从事 2 个职能：
这个：
function generateHearts() {
if ($('.hearts') < hearts) {
for (i = 1; i <= hearts; i++) {
$('.heartcontainer').append(`<img class='hearts' src="images/full.png">`);
}
}
}
变成：
function generateHearts(number) {
for (i = 1; i <= number; i++) {
$('.heartcontainer').append(`<i class="fa fa-heart" aria-hidden="true"></i>`);
}
}
如您所见，我将红心数作为参数传递：游戏演示时为 3，开始时为 10。
第二个函数是这样的：
function updateHearts() {
hearts--;
$('.heartcontainer').slice('.hearts').append(`<img class='empty' src = 'images/empty.png'>`);
}
变成：
function updateHearts(answer) {
if(!answer) {
$(`.heartcontainer i:nth-child(${brokenPots + 1})`).removeClass("fa-heart").addClass("fa-heart-o");
hearts--;
}
}
我在这里也传递了一个参数（无论答案是否正确）。如果错了，我用一颗空心换一颗心（使用不同的class）。我换的红心数和问题一样：${brokenPots + 1}
这是实际的代码：
const STORE = [
//Question 1
{
question: `Who is the Sage of Shadows in Ocarina of Time?`,
choices: [
`Princess Zelda`,
`Saria`,
`Darunia`,
`Impa`],
answer: `Impa`,
},
//Question 2
{
question: `What is the fairies name that follows the Hero in Majora’s Mask?`,
choices: [
`Tatl`,
`Termina`,
`Twinmold`,
`Tael`],
answer: `Tatl`,
},
//Question 3
{
question: `What is the first Zelda game that the Hero was an adult the whole game?`,
choices: [
`Breath of the Wild`,
`Ocarina of Time`,
`Twilight Princess`,
`Wind Waker`],
answer: `Twilight Princess`,
},
//Question 4
{
question: `Finish this quote: “Courage need not be remembered, …”`,
choices:[
`for it is never lost.`,
`for it is never forgotten.`,
`because it is proven.`,
`for it is always there.`],
answer:`for it is never forgotten.`,
},
//Question 5
{
question: `The Legend of Zelda(NES) is known for being the first video game that…`,
choices:[
`had music.`,
`allowed saving.`,
`had color.`,
`was released on the NES.`],
answer: `allowed saving.`,
},
//Question 6
{
question: `Who is the main antagonist a majority of The Legend of Zelda series?`,
choices:[`Ganon`,
`Zant`,
`Ghirahim`,
`Majora`],
answer: `Ganon`,
},
//Question 7
{
question: `Which of The Legend of Zelda games was the first to not have the usual main villain?`,
choices:[`Minish Cap`, `Skyward Sword`, `The Legend of Zelda II`, `Majora’ s Mask`],
answer: `The Legend of Zelda II`,
},
//Question 8
{
question:`What is the Hero’ s name ?`,
choices:[
`Zelda`,
`Link`,
`Epona`,
`Shiek`
],
answer:`Link`,
},
//Question 9
{
question: `How many hearts do you need in Breath of the Wild to get the Master Sword?`,
choices:[`13`, `10`, `20`, `15`],
answer: `13`,
},
//Question 10
{
question: `Who develops the Legend of Zelda(series)?`,
choices:[`Sony`, `Microsoft`, `Sega`, `Nintendo`],
answer:`Nintendo`,
}
];
const OUTCOMES = {
perfect: {
message: `You are worthy of holding the Master Sword at it's full power!`,
endImage: `images/fullpowermastersword.png`
},
great: {
message: `You are worthy of holding the Master Sword but it isn't at it's full potential.`,
endImage: `images/mastersword.png`
},
good: {
message: `You have drawn the Master Sword but it's damaged. Return it to the pedastal and try again.`,
endImage: `images/rustedmastersword.png`
},
fail: {
message: `You are not worthy. Here's a stick.`,
endImage: `images/treebranch.png`
},
}
let hearts = 10;
let brokenPots = 0;
function startQuest() {
$('#quizcontainer').on('click', '.startbutton', function (event) {
$('#quizcontainer').empty();
$('.potCounter').empty();
$('.potCounter').html(`<h1><span>Question:<span class ="brokenPots">0</span>/10</span></h1>`);
$('.brokenPots').text(1);
$('.heartcontainer').empty();
generateHearts(10);
$('#quizcontainer').append(generateQuestion());
});
}
function generateQuestion() {
if (brokenPots < STORE.length) {
return generateQuiz(brokenPots);
} else {
$('#quizcontiner').empty();
heartsRemaining();
$('.brokenPots').text(10);
}
}
function generateQuiz(questionIndex) {
let dungeonMaker = $(`<form>
<fieldset class="choices">
<legend class="questionText">${STORE[questionIndex].question}</legend><br>
</fieldset>
</form>`)
let fieldFinder = $(dungeonMaker).find('fieldset');
STORE[questionIndex].choices.forEach(function (choicesValue, choicesIndex) {
$(`<label class="choices" for="${choicesIndex}">
<input type="radio" class="select" id="${choicesIndex}" value="${choicesValue}" name="answer" required>
<span>${choicesValue}</span>
</label>
`).appendTo(fieldFinder);
});
$(`<br><button type="submit" class="submitButton press">Submit</button >`).appendTo(fieldFinder);
return dungeonMaker;
}
function submitChoice() {
$('#quizcontainer').on('submit', function (event) {
const chosen = $('input:checked');
const choice = chosen.val();
const correct = STORE[brokenPots].answer;
if (choice === correct) {
correctChoice();
} else {
wrongChoice();
}
});
}
function correctChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>Correct!</h3>
<br>
<button type="button" class="nextButton press">Next</button>`
)
updateHearts(true);
}
function wrongChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>You took some damage.</h3>
<span class="next">Correct Answer is:</span>
<span class="next">${STORE[brokenPots].answer}</span>
<br>
<button type="button" class="nextButton press">Next</button>`
);
updateHearts(false);
}
function nextQuestion() {
$('#quizcontainer').on('click', '.nextButton', function (event) {
$('#quizcontainer').empty();
updatePotsBroken();
$('#quizcontainer').append(generateQuestion());
});
}
function updatePotsBroken() {
brokenPots++;
$('.brokenPots').text(brokenPots + 1);
}
function generateHearts(number) {
for (i = 1; i <= number; i++) {
$('.heartcontainer').append(`<i class="fa fa-heart" aria-hidden="true"></i>`);
}
}
function updateHearts(answer) {
if(!answer) {
$(`.heartcontainer i:nth-child(${brokenPots + 1})`).removeClass("fa-heart").addClass("fa-heart-o");
hearts--;
}
}
function heartsRemaining() {
const questResult = countHearts();
$("#quizcontainer").append(`<h1>${questResult.message}</h1>`);
//return (`<h1>${questResult.message}</h1>`)
}
function countHearts() {
if (hearts === 10) {
return OUTCOMES.perfect;
} else if (hearts < 9 && hearts >= 7) {
return OUTCOMES.great;
} else if (hearts < 6 && hearts >= 3) {
return OUTCOMES.good;
} else {
return OUTCOMES.fail;
}
}
function restartQuest() {
hearts = 10;
brokenPots = 0;
generateHearts(3);
$('.brokenPots').text(0);
}
function handledrawSword() {
startQuest();
generateQuestion();
submitChoice();
nextQuestion();
restartQuest();
}
$(handledrawSword);
* {
box-sizing: border-box;
border: 0;
padding: 0;
margin: 0;
cursor: url('images/cursor.gif'), auto;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
background-color: #5A8C58;
color: #F2C46D;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
main {
flex-grow: 1;
}
header,
main,
footer {
flex-shrink: 0;
}
.pagecontainer {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
main{
display: flex;
justify-content:center;
flex-direction: column;
}
.border{
margin: 10px 5px 10px 5px;
border: medium;
border-style: solid;
border-color: black;
background-color:#D9D3B4;
}
.background-image{
background-image: url("images/shield.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.headercontainer {
font-family: 'Press Start 2P', cursive;
font-size: 10px;
margin: 5px 10px 10px 10px;
}
.heartcontainer{
min-height: 35px;
}
.empty, .hearts{
margin: 7px 0px 0px 0px;
height:20px;
}
#quizcontainer{
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
min-width: 300px;
min-height: 300px;
}
.choices{
display: block;
}
.centercontainer{
display: flex;
justify-content:center;
flex-direction: row;
margin: 10px 0px 10px 0px;
}
.contactcontainer{
display: flex;
max-width: 500px;
flex-flow: row wrap;
justify-content: center;
align-content: center;
list-style: none;
}
.contactinfo {
height: 30px;
width: 30px;
margin: 0px 25px 0px 25px;
}
.press{
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
font-size: 20px;
width: 4em;
height: 2em;
border: 3px;
border-style: outset;
color: #F2C46D;
background-color:#E8591A;
margin: 5px 0px 5px 0px;
}
.press:active{
border: 3px;
border-style: inset;
}
.press:hover {
background-color:#BD4715;
}
@media only screen and (min-width: 769px) {
main{
display: flex;
justify-content:center;
flex-direction: column;
min-width: 770px;
min-height: 770px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="pagecontainer">
<main>
<div class="count border">
<header>
<div class="headercontainer potCounter">
<br>
<h1>Are you Worthy of the Master Sword?</h1>
</div>
</header>
</div>
<div class="health border">
<section>
<div class="heartcontainer">
</div>
</section>
</div>
<div class="quiz border background-image">
<section>
<div id="quizcontainer">
<div class="startcontainer">
<span>
Test your knowlodge on "The Legend Zelda Series" to see if you are worthy of
wielding the Master Sword!
</span>
<br>
<br>
<button class="press startbutton">Start</button>
</div>
</section>
</div>
</main>
<footer>
<div class="centercontainer">
<div class="border">
<ul class="contactcontainer">
<li><a href="mailto:#" target="_top"><img src="images/email.png"
class="contactinfo" alt="Email Icon" /></a></li>
<li><a href="#" target="_blank"><img src="images/webpage.png" class="contactinfo"
alt="Website Icon" /></a></li>
<li><a href="#" target="_blank"><img
src="images/linkedin.png" class="contactinfo" alt="LinkedIn Icon" /></a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</div>
编辑 1 进行一些更改以管理图像而非字体。在此代码段中，您看不到图像发生变化，但如果您复制并粘贴此代码，它们就会起作用。还要小心 HTML：我从 div 中删除了所有的红心 heartcontainer：它们是随脚本即时添加的。
const STORE = [
//Question 1
{
question: `Who is the Sage of Shadows in Ocarina of Time?`,
choices: [
`Princess Zelda`,
`Saria`,
`Darunia`,
`Impa`],
answer: `Impa`,
},
//Question 2
{
question: `What is the fairies name that follows the Hero in Majora’s Mask?`,
choices: [
`Tatl`,
`Termina`,
`Twinmold`,
`Tael`],
answer: `Tatl`,
},
//Question 3
{
question: `What is the first Zelda game that the Hero was an adult the whole game?`,
choices: [
`Breath of the Wild`,
`Ocarina of Time`,
`Twilight Princess`,
`Wind Waker`],
answer: `Twilight Princess`,
},
//Question 4
{
question: `Finish this quote: “Courage need not be remembered, …”`,
choices:[
`for it is never lost.`,
`for it is never forgotten.`,
`because it is proven.`,
`for it is always there.`],
answer:`for it is never forgotten.`,
},
//Question 5
{
question: `The Legend of Zelda(NES) is known for being the first video game that…`,
choices:[
`had music.`,
`allowed saving.`,
`had color.`,
`was released on the NES.`],
answer: `allowed saving.`,
},
//Question 6
{
question: `Who is the main antagonist a majority of The Legend of Zelda series?`,
choices:[`Ganon`,
`Zant`,
`Ghirahim`,
`Majora`],
answer: `Ganon`,
},
//Question 7
{
question: `Which of The Legend of Zelda games was the first to not have the usual main villain?`,
choices:[`Minish Cap`, `Skyward Sword`, `The Legend of Zelda II`, `Majora’ s Mask`],
answer: `The Legend of Zelda II`,
},
//Question 8
{
question:`What is the Hero’ s name ?`,
choices:[
`Zelda`,
`Link`,
`Epona`,
`Shiek`
],
answer:`Link`,
},
//Question 9
{
question: `How many hearts do you need in Breath of the Wild to get the Master Sword?`,
choices:[`13`, `10`, `20`, `15`],
answer: `13`,
},
//Question 10
{
question: `Who develops the Legend of Zelda(series)?`,
choices:[`Sony`, `Microsoft`, `Sega`, `Nintendo`],
answer:`Nintendo`,
}
];
const OUTCOMES = {
perfect: {
message: `You are worthy of holding the Master Sword at it's full power!`,
endImage: `images/fullpowermastersword.png`
},
great: {
message: `You are worthy of holding the Master Sword but it isn't at it's full potential.`,
endImage: `images/mastersword.png`
},
good: {
message: `You have drawn the Master Sword but it's damaged. Return it to the pedastal and try again.`,
endImage: `images/rustedmastersword.png`
},
fail: {
message: `You are not worthy. Here's a stick.`,
endImage: `images/treebranch.png`
},
}
let hearts = 10;
let brokenPots = 0;
function startQuest() {
$('#quizcontainer').on('click', '.startbutton', function (event) {
$('#quizcontainer').empty();
$('.potCounter').empty();
$('.potCounter').html(`<h1><span>Question:<span class ="brokenPots">0</span>/10</span></h1>`);
$('.brokenPots').text(1);
$('.heartcontainer').empty();
generateHearts(10);
$('#quizcontainer').append(generateQuestion());
});
}
function generateQuestion() {
if (brokenPots < STORE.length) {
return generateQuiz(brokenPots);
} else {
$('#quizcontiner').empty();
heartsRemaining();
$('.brokenPots').text(10);
}
}
function generateQuiz(questionIndex) {
let dungeonMaker = $(`<form>
<fieldset class="choices">
<legend class="questionText">${STORE[questionIndex].question}</legend><br>
</fieldset>
</form>`)
let fieldFinder = $(dungeonMaker).find('fieldset');
STORE[questionIndex].choices.forEach(function (choicesValue, choicesIndex) {
$(`<label class="choices" for="${choicesIndex}">
<input type="radio" class="select" id="${choicesIndex}" value="${choicesValue}" name="answer" required>
<span>${choicesValue}</span>
</label>
`).appendTo(fieldFinder);
});
$(`<br><button type="submit" class="submitButton press">Submit</button >`).appendTo(fieldFinder);
return dungeonMaker;
}
function submitChoice() {
$('#quizcontainer').on('submit', function (event) {
const chosen = $('input:checked');
const choice = chosen.val();
const correct = STORE[brokenPots].answer;
if (choice === correct) {
correctChoice();
} else {
wrongChoice();
}
});
}
function correctChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>Correct!</h3>
<br>
<button type="button" class="nextButton press">Next</button>`
)
updateHearts(true);
}
function wrongChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>You took some damage.</h3>
<span class="next">Correct Answer is:</span>
<span class="next">${STORE[brokenPots].answer}</span>
<br>
<button type="button" class="nextButton press">Next</button>`
);
updateHearts(false);
}
function nextQuestion() {
$('#quizcontainer').on('click', '.nextButton', function (event) {
$('#quizcontainer').empty();
updatePotsBroken();
$('#quizcontainer').append(generateQuestion());
});
}
function updatePotsBroken() {
brokenPots++;
$('.brokenPots').text(brokenPots + 1);
}
function generateHearts(number) {
for (i = 1; i <= number; i++) {
$('.heartcontainer').append(`<img src=images/full.png class='fullheart'>`);
}
}
function updateHearts(answer) {
if(!answer) {
$(`.fullheart:nth-child(${brokenPots + 1})`).attr("src","images/empty.png");
hearts--;
}
}
function heartsRemaining() {
const questResult = countHearts();
$("#quizcontainer").append(`<h1>${questResult.message}</h1>`);
//return (`<h1>${questResult.message}</h1>`)
}
function countHearts() {
if (hearts === 10) {
return OUTCOMES.perfect;
} else if (hearts < 9 && hearts >= 7) {
return OUTCOMES.great;
} else if (hearts < 6 && hearts >= 3) {
return OUTCOMES.good;
} else {
return OUTCOMES.fail;
}
}
function restartQuest() {
hearts = 10;
brokenPots = 0;
generateHearts(3);
$('.brokenPots').text(0);
}
function handledrawSword() {
startQuest();
generateQuestion();
submitChoice();
nextQuestion();
restartQuest();
}
$(handledrawSword);
* {
box-sizing: border-box;
border: 0;
padding: 0;
margin: 0;
cursor: url('images/cursor.gif'), auto;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
background-color: #5A8C58;
color: #F2C46D;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
main {
flex-grow: 1;
}
header,
main,
footer {
flex-shrink: 0;
}
.pagecontainer {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
main{
display: flex;
justify-content:center;
flex-direction: column;
}
.border{
margin: 10px 5px 10px 5px;
border: medium;
border-style: solid;
border-color: black;
background-color:#D9D3B4;
}
.background-image{
background-image: url("images/shield.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.headercontainer {
font-family: 'Press Start 2P', cursive;
font-size: 10px;
margin: 5px 10px 10px 10px;
}
.heartcontainer{
min-height: 35px;
}
.emptyheart, .fullheart{
margin: 7px 0px 0px 0px;
height:20px;
}
#quizcontainer{
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
min-width: 300px;
min-height: 300px;
}
.choices{
display: block;
}
.centercontainer{
display: flex;
justify-content:center;
flex-direction: row;
margin: 10px 0px 10px 0px;
}
.contactcontainer{
display: flex;
max-width: 500px;
flex-flow: row wrap;
justify-content: center;
align-content: center;
list-style: none;
}
.contactinfo {
height: 30px;
width: 30px;
margin: 0px 25px 0px 25px;
}
.press{
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
font-size: 20px;
width: 4em;
height: 2em;
border: 3px;
border-style: outset;
color: #F2C46D;
background-color:#E8591A;
margin: 5px 0px 5px 0px;
}
.press:active{
border: 3px;
border-style: inset;
}
.press:hover {
background-color:#BD4715;
}
@media only screen and (min-width: 769px) {
main{
display: flex;
justify-content:center;
flex-direction: column;
min-width: 770px;
min-height: 770px;
}
}
<div class="pagecontainer">
<main>
<div class="count border">
<header>
<div class="headercontainer potCounter">
<br>
<h1>Are you Worthy of the Master Sword?</h1>
</div>
</header>
</div>
<div class="health border">
<section>
<div class="heartcontainer">
</div>
</section>
</div>
<div class="quiz border background-image">
<section>
<div id="quizcontainer">
<div class="startcontainer">
<span>
Test your knowlodge on "The Legend Zelda Series" to see if you are worthy of
wielding the Master Sword!
</span>
<br>
<br>
<button class="press startbutton">Start</button>
</div>
</section>
</div>
</main>
<footer>
<div class="centercontainer">
<div class="border">
<ul class="contactcontainer">
<li><a href="mailto:#" target="_top"><img src="images/email.png"
class="contactinfo" alt="Email Icon" /></a></li>
<li><a href="#" target="_blank"><img src="images/webpage.png" class="contactinfo"
alt="Website Icon" /></a></li>
<li><a href="#" target="_blank"><img
src="images/linkedin.png" class="contactinfo" alt="LinkedIn Icon" /></a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</div>
我正在制作一个测验应用程序，但我不知道如何进行特定活动。一开始我想做的是显示 3 颗心，作为对塞尔达的敬意，然后擦除并添加 10 颗心。每次问题回答错误时，它都会移除一颗心并用一颗空心代替它。问题是我无法弄清楚如何将它添加到 10 中并进行替换。任何帮助，将不胜感激！谢谢。
const STORE = [
//Question 1
{
question: `Who is the Sage of Shadows in Ocarina of Time?`,
choices: [
`Princess Zelda`,
`Saria`,
`Darunia`,
`Impa`],
answer: `Impa`,
},
//Question 2
{
question: `What is the fairies name that follows the Hero in Majora’s Mask?`,
choices: [
`Tatl`,
`Termina`,
`Twinmold`,
`Tael`],
answer: `Tatl`,
},
//Question 3
{
question: `What is the first Zelda game that the Hero was an adult the whole game?`,
choices: [
`Breath of the Wild`,
`Ocarina of Time`,
`Twilight Princess`,
`Wind Waker`],
answer: `Twilight Princess`,
},
//Question 4
{
question: `Finish this quote: “Courage need not be remembered, …”`,
choices:[
`for it is never lost.`,
`for it is never forgotten.`,
`because it is proven.`,
`for it is always there.`],
answer:`for it is never forgotten.`,
},
//Question 5
{
question: `The Legend of Zelda(NES) is known for being the first video game that…`,
choices:[
`had music.`,
`allowed saving.`,
`had color.`,
`was released on the NES.`],
answer: `allowed saving.`,
},
//Question 6
{
question: `Who is the main antagonist a majority of The Legend of Zelda series?`,
choices:[`Ganon`,
`Zant`,
`Ghirahim`,
`Majora`],
answer: `Ganon`,
},
//Question 7
{
question: `Which of The Legend of Zelda games was the first to not have the usual main villain?`,
choices:[`Minish Cap`, `Skyward Sword`, `The Legend of Zelda II`, `Majora’ s Mask`],
answer: `The Legend of Zelda II`,
},
//Question 8
{
question:`What is the Hero’ s name ?`,
choices:[
`Zelda`,
`Link`,
`Epona`,
`Shiek`
],
answer:`Link`,
},
//Question 9
{
question: `How many hearts do you need in Breath of the Wild to get the Master Sword?`,
choices:[`13`, `10`, `20`, `15`],
answer: `13`,
},
//Question 10
{
question: `Who develops the Legend of Zelda(series)?`,
choices:[`Sony`, `Microsoft`, `Sega`, `Nintendo`],
answer:`Nintendo`,
}
];
const OUTCOMES = {
perfect: {
message: `You are worthy of holding the Master Sword at it's full power!`,
endImage: `images/fullpowermastersword.png`
},
great: {
message: `You are worthy of holding the Master Sword but it isn't at it's full potential.`,
endImage: `images/mastersword.png`
},
good: {
message: `You have drawn the Master Sword but it's damaged. Return it to the pedastal and try again.`,
endImage: `images/rustedmastersword.png`
},
fail: {
message: `You are not worthy. Here's a stick.`,
endImage: `images/treebranch.png`
},
}
let hearts = 10;
let brokenPots = 0;
function startQuest() {
$('#quizcontainer').on('click', '.startbutton', function (event) {
$('#quizcontainer').empty();
$('.potCounter').empty();
$('.potCounter').html(`<h1><span>Question:<span class ="brokenPots">0</span>/10</span></h1>`);
$('.brokenPots').text(1);
$('.heartcontainer').empty();
generateHearts();
$('#quizcontainer').append(generateQuestion());
});
}
function generateQuestion() {
if (brokenPots < STORE.length) {
return generateQuiz(brokenPots);
} else {
$('#quizcontiner').empty();
heartsRemaining();
$('.brokenPots').text(10);
}
}
function generateQuiz(questionIndex) {
let dungeonMaker = $(`<form>
<fieldset class="choices">
<legend class="questionText">${STORE[questionIndex].question}</legend><br>
</fieldset>
</form>`)
let fieldFinder = $(dungeonMaker).find('fieldset');
STORE[questionIndex].choices.forEach(function (choicesValue, choicesIndex) {
$(`<label class="choices" for="${choicesIndex}">
<input type="radio" class="select" id="${choicesIndex}" value="${choicesValue}" name="answer" required>
<span>${choicesValue}</span>
</label>
`).appendTo(fieldFinder);
});
$(`<br><button type="submit" class="submitButton press">Submit</button >`).appendTo(fieldFinder);
return dungeonMaker;
}
function submitChoice() {
$('#quizcontainer').on('submit', function (event) {
const chosen = $('input:checked');
const choice = chosen.val();
const correct = STORE[brokenPots].answer;
if (choice === correct) {
correctChoice();
} else {
wrongChoice();
}
});
}
function correctChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>Correct!</h3>
<br>
<button type="button" class="nextButton press">Next</button>`
)
}
function wrongChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>You took some damage.</h3>
<span class="next">Correct Answer is:</span>
<span class="next">${STORE[brokenPots].answer}</span>
<br>
<button type="button" class="nextButton press">Next</button>`
);
updateHearts();
}
function nextQuestion() {
$('#quizcontainer').on('click', '.nextButton', function (event) {
$('#quizcontainer').empty();
updatePotsBroken();
$('#quizcontainer').append(generateQuestion());
});
}
function updatePotsBroken() {
brokenPots++;
$('.brokenPots').text(brokenPots + 1);
}
function generateHearts() {
if ($('.hearts') < hearts) {
for (i = 1; i <= hearts; i++) {
$('.heartcontainer').append(`<img class='hearts' src="images/full.png">`);
}
}
}
function updateHearts() {
hearts--;
$('.heartcontainer').slice('.hearts').append(`<img class='empty' src = 'images/empty.png'>`);
}
function heartsRemaining() {
const questResult = countHearts();
return (`<h1>${questResult.message}</h1>`)
}
function countHearts() {
if (hearts === 10) {
return OUTCOMES.perfect;
} else if (hearts < 9 && hearts >= 7) {
return OUTCOMES.great;
} else if (hearts < 6 && hearts >= 3) {
return OUTCOMES.good;
} else {
return OUTCOMES.fail;
}
}
function restartQuest() {
hearts = 10;
brokenPots = 0;
generateHearts();
$('.brokenPots').text(0);
}
function handledrawSword() {
startQuest();
generateQuestion();
submitChoice();
nextQuestion();
restartQuest();
}
$(handledrawSword);
* {
box-sizing: border-box;
border: 0;
padding: 0;
margin: 0;
cursor: url('images/cursor.gif'), auto;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
background-color: #5A8C58;
color: #F2C46D;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
main {
flex-grow: 1;
}
header,
main,
footer {
flex-shrink: 0;
}
.pagecontainer {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
main{
display: flex;
justify-content:center;
flex-direction: column;
}
.border{
margin: 10px 5px 10px 5px;
border: medium;
border-style: solid;
border-color: black;
background-color:#D9D3B4;
}
.background-image{
background-image: url("images/shield.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.headercontainer {
font-family: 'Press Start 2P', cursive;
font-size: 10px;
margin: 5px 10px 10px 10px;
}
.heartcontainer{
min-height: 35px;
}
.empty,
.hearts{
margin: 7px 0px 0px 0px;
height:20px;
}
#quizcontainer{
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
min-width: 300px;
min-height: 300px;
}
.choices
{
display: block;
}
.centercontainer{
display: flex;
justify-content:center;
flex-direction: row;
margin: 10px 0px 10px 0px;
}
.contactcontainer{
display: flex;
max-width: 500px;
flex-flow: row wrap;
justify-content: center;
align-content: center;
list-style: none;
}
.contactinfo {
height: 30px;
width: 30px;
margin: 0px 25px 0px 25px;
}
.press{
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
font-size: 20px;
width: 4em;
height: 2em;
border: 3px;
border-style: outset;
color: #F2C46D;
background-color:#E8591A;
margin: 5px 0px 5px 0px;
}
.press:active{
border: 3px;
border-style: inset;
}
.press:hover {
background-color:#BD4715;
}
@media only screen and (min-width: 540px) {}
@media only screen and (min-width: 769px) {
main{
display: flex;
justify-content:center;
flex-direction: column;
min-width: 770px;
min-height: 770px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P|Roboto:700&display=swap" rel="stylesheet">
<title>Legend of Zelda: Quiz</title>
</head>
<body>
<div class="pagecontainer">
<main>
<div class="count border">
<header>
<div class="headercontainer potCounter">
<br>
<h1>Are you Worthy of the Master Sword?</h1>
</div>
</header>
</div>
<div class="health border">
<section>
<div class="heartcontainer">
<img src=images/full.png class='empty'>
<img src=images/full.png class='empty'>
<img src=images/full.png class='empty'>
</div>
</section>
</div>
<div class="quiz border background-image">
<section>
<div id="quizcontainer">
<div class="startcontainer">
<span>
Test your knowlodge on "The Legend Zelda Series" to see if you are worthy of
wielding the Master Sword!
</span>
<br>
<br>
<button class="press startbutton">Start</button>
</div>
</section>
</div>
</main>
<footer>
<div class="centercontainer">
<div class="border">
<ul class="contactcontainer">
<li><a href="mailto:#" target="_top"><img src="images/email.png"
class="contactinfo" alt="Email Icon" /></a></li>
<li><a href="#" target="_blank"><img src="images/webpage.png" class="contactinfo"
alt="Website Icon" /></a></li>
<li><a href="#" target="_blank"><img
src="images/linkedin.png" class="contactinfo" alt="LinkedIn Icon" /></a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="STORE.js"></script>
<script src="script.js"></script>
</div>
</body>
</html>
为了帮助您，我用 font-awesome 的图标更改了您的图标。不是因为使用图片错误，而是因为我看不到你的图片。
我主要从事 2 个职能：
这个：
function generateHearts() {
if ($('.hearts') < hearts) {
for (i = 1; i <= hearts; i++) {
$('.heartcontainer').append(`<img class='hearts' src="images/full.png">`);
}
}
}
变成：
function generateHearts(number) {
for (i = 1; i <= number; i++) {
$('.heartcontainer').append(`<i class="fa fa-heart" aria-hidden="true"></i>`);
}
}
如您所见，我将红心数作为参数传递：游戏演示时为 3，开始时为 10。
第二个函数是这样的：
function updateHearts() {
hearts--;
$('.heartcontainer').slice('.hearts').append(`<img class='empty' src = 'images/empty.png'>`);
}
变成：
function updateHearts(answer) {
if(!answer) {
$(`.heartcontainer i:nth-child(${brokenPots + 1})`).removeClass("fa-heart").addClass("fa-heart-o");
hearts--;
}
}
我在这里也传递了一个参数（无论答案是否正确）。如果错了，我用一颗空心换一颗心（使用不同的class）。我换的红心数和问题一样：${brokenPots + 1}
这是实际的代码：
const STORE = [
//Question 1
{
question: `Who is the Sage of Shadows in Ocarina of Time?`,
choices: [
`Princess Zelda`,
`Saria`,
`Darunia`,
`Impa`],
answer: `Impa`,
},
//Question 2
{
question: `What is the fairies name that follows the Hero in Majora’s Mask?`,
choices: [
`Tatl`,
`Termina`,
`Twinmold`,
`Tael`],
answer: `Tatl`,
},
//Question 3
{
question: `What is the first Zelda game that the Hero was an adult the whole game?`,
choices: [
`Breath of the Wild`,
`Ocarina of Time`,
`Twilight Princess`,
`Wind Waker`],
answer: `Twilight Princess`,
},
//Question 4
{
question: `Finish this quote: “Courage need not be remembered, …”`,
choices:[
`for it is never lost.`,
`for it is never forgotten.`,
`because it is proven.`,
`for it is always there.`],
answer:`for it is never forgotten.`,
},
//Question 5
{
question: `The Legend of Zelda(NES) is known for being the first video game that…`,
choices:[
`had music.`,
`allowed saving.`,
`had color.`,
`was released on the NES.`],
answer: `allowed saving.`,
},
//Question 6
{
question: `Who is the main antagonist a majority of The Legend of Zelda series?`,
choices:[`Ganon`,
`Zant`,
`Ghirahim`,
`Majora`],
answer: `Ganon`,
},
//Question 7
{
question: `Which of The Legend of Zelda games was the first to not have the usual main villain?`,
choices:[`Minish Cap`, `Skyward Sword`, `The Legend of Zelda II`, `Majora’ s Mask`],
answer: `The Legend of Zelda II`,
},
//Question 8
{
question:`What is the Hero’ s name ?`,
choices:[
`Zelda`,
`Link`,
`Epona`,
`Shiek`
],
answer:`Link`,
},
//Question 9
{
question: `How many hearts do you need in Breath of the Wild to get the Master Sword?`,
choices:[`13`, `10`, `20`, `15`],
answer: `13`,
},
//Question 10
{
question: `Who develops the Legend of Zelda(series)?`,
choices:[`Sony`, `Microsoft`, `Sega`, `Nintendo`],
answer:`Nintendo`,
}
];
const OUTCOMES = {
perfect: {
message: `You are worthy of holding the Master Sword at it's full power!`,
endImage: `images/fullpowermastersword.png`
},
great: {
message: `You are worthy of holding the Master Sword but it isn't at it's full potential.`,
endImage: `images/mastersword.png`
},
good: {
message: `You have drawn the Master Sword but it's damaged. Return it to the pedastal and try again.`,
endImage: `images/rustedmastersword.png`
},
fail: {
message: `You are not worthy. Here's a stick.`,
endImage: `images/treebranch.png`
},
}
let hearts = 10;
let brokenPots = 0;
function startQuest() {
$('#quizcontainer').on('click', '.startbutton', function (event) {
$('#quizcontainer').empty();
$('.potCounter').empty();
$('.potCounter').html(`<h1><span>Question:<span class ="brokenPots">0</span>/10</span></h1>`);
$('.brokenPots').text(1);
$('.heartcontainer').empty();
generateHearts(10);
$('#quizcontainer').append(generateQuestion());
});
}
function generateQuestion() {
if (brokenPots < STORE.length) {
return generateQuiz(brokenPots);
} else {
$('#quizcontiner').empty();
heartsRemaining();
$('.brokenPots').text(10);
}
}
function generateQuiz(questionIndex) {
let dungeonMaker = $(`<form>
<fieldset class="choices">
<legend class="questionText">${STORE[questionIndex].question}</legend><br>
</fieldset>
</form>`)
let fieldFinder = $(dungeonMaker).find('fieldset');
STORE[questionIndex].choices.forEach(function (choicesValue, choicesIndex) {
$(`<label class="choices" for="${choicesIndex}">
<input type="radio" class="select" id="${choicesIndex}" value="${choicesValue}" name="answer" required>
<span>${choicesValue}</span>
</label>
`).appendTo(fieldFinder);
});
$(`<br><button type="submit" class="submitButton press">Submit</button >`).appendTo(fieldFinder);
return dungeonMaker;
}
function submitChoice() {
$('#quizcontainer').on('submit', function (event) {
const chosen = $('input:checked');
const choice = chosen.val();
const correct = STORE[brokenPots].answer;
if (choice === correct) {
correctChoice();
} else {
wrongChoice();
}
});
}
function correctChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>Correct!</h3>
<br>
<button type="button" class="nextButton press">Next</button>`
)
updateHearts(true);
}
function wrongChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>You took some damage.</h3>
<span class="next">Correct Answer is:</span>
<span class="next">${STORE[brokenPots].answer}</span>
<br>
<button type="button" class="nextButton press">Next</button>`
);
updateHearts(false);
}
function nextQuestion() {
$('#quizcontainer').on('click', '.nextButton', function (event) {
$('#quizcontainer').empty();
updatePotsBroken();
$('#quizcontainer').append(generateQuestion());
});
}
function updatePotsBroken() {
brokenPots++;
$('.brokenPots').text(brokenPots + 1);
}
function generateHearts(number) {
for (i = 1; i <= number; i++) {
$('.heartcontainer').append(`<i class="fa fa-heart" aria-hidden="true"></i>`);
}
}
function updateHearts(answer) {
if(!answer) {
$(`.heartcontainer i:nth-child(${brokenPots + 1})`).removeClass("fa-heart").addClass("fa-heart-o");
hearts--;
}
}
function heartsRemaining() {
const questResult = countHearts();
$("#quizcontainer").append(`<h1>${questResult.message}</h1>`);
//return (`<h1>${questResult.message}</h1>`)
}
function countHearts() {
if (hearts === 10) {
return OUTCOMES.perfect;
} else if (hearts < 9 && hearts >= 7) {
return OUTCOMES.great;
} else if (hearts < 6 && hearts >= 3) {
return OUTCOMES.good;
} else {
return OUTCOMES.fail;
}
}
function restartQuest() {
hearts = 10;
brokenPots = 0;
generateHearts(3);
$('.brokenPots').text(0);
}
function handledrawSword() {
startQuest();
generateQuestion();
submitChoice();
nextQuestion();
restartQuest();
}
$(handledrawSword);
* {
box-sizing: border-box;
border: 0;
padding: 0;
margin: 0;
cursor: url('images/cursor.gif'), auto;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
background-color: #5A8C58;
color: #F2C46D;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
main {
flex-grow: 1;
}
header,
main,
footer {
flex-shrink: 0;
}
.pagecontainer {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
main{
display: flex;
justify-content:center;
flex-direction: column;
}
.border{
margin: 10px 5px 10px 5px;
border: medium;
border-style: solid;
border-color: black;
background-color:#D9D3B4;
}
.background-image{
background-image: url("images/shield.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.headercontainer {
font-family: 'Press Start 2P', cursive;
font-size: 10px;
margin: 5px 10px 10px 10px;
}
.heartcontainer{
min-height: 35px;
}
.empty, .hearts{
margin: 7px 0px 0px 0px;
height:20px;
}
#quizcontainer{
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
min-width: 300px;
min-height: 300px;
}
.choices{
display: block;
}
.centercontainer{
display: flex;
justify-content:center;
flex-direction: row;
margin: 10px 0px 10px 0px;
}
.contactcontainer{
display: flex;
max-width: 500px;
flex-flow: row wrap;
justify-content: center;
align-content: center;
list-style: none;
}
.contactinfo {
height: 30px;
width: 30px;
margin: 0px 25px 0px 25px;
}
.press{
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
font-size: 20px;
width: 4em;
height: 2em;
border: 3px;
border-style: outset;
color: #F2C46D;
background-color:#E8591A;
margin: 5px 0px 5px 0px;
}
.press:active{
border: 3px;
border-style: inset;
}
.press:hover {
background-color:#BD4715;
}
@media only screen and (min-width: 769px) {
main{
display: flex;
justify-content:center;
flex-direction: column;
min-width: 770px;
min-height: 770px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="pagecontainer">
<main>
<div class="count border">
<header>
<div class="headercontainer potCounter">
<br>
<h1>Are you Worthy of the Master Sword?</h1>
</div>
</header>
</div>
<div class="health border">
<section>
<div class="heartcontainer">
</div>
</section>
</div>
<div class="quiz border background-image">
<section>
<div id="quizcontainer">
<div class="startcontainer">
<span>
Test your knowlodge on "The Legend Zelda Series" to see if you are worthy of
wielding the Master Sword!
</span>
<br>
<br>
<button class="press startbutton">Start</button>
</div>
</section>
</div>
</main>
<footer>
<div class="centercontainer">
<div class="border">
<ul class="contactcontainer">
<li><a href="mailto:#" target="_top"><img src="images/email.png"
class="contactinfo" alt="Email Icon" /></a></li>
<li><a href="#" target="_blank"><img src="images/webpage.png" class="contactinfo"
alt="Website Icon" /></a></li>
<li><a href="#" target="_blank"><img
src="images/linkedin.png" class="contactinfo" alt="LinkedIn Icon" /></a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</div>
编辑 1 进行一些更改以管理图像而非字体。在此代码段中，您看不到图像发生变化，但如果您复制并粘贴此代码，它们就会起作用。还要小心 HTML：我从 div 中删除了所有的红心 heartcontainer：它们是随脚本即时添加的。
const STORE = [
//Question 1
{
question: `Who is the Sage of Shadows in Ocarina of Time?`,
choices: [
`Princess Zelda`,
`Saria`,
`Darunia`,
`Impa`],
answer: `Impa`,
},
//Question 2
{
question: `What is the fairies name that follows the Hero in Majora’s Mask?`,
choices: [
`Tatl`,
`Termina`,
`Twinmold`,
`Tael`],
answer: `Tatl`,
},
//Question 3
{
question: `What is the first Zelda game that the Hero was an adult the whole game?`,
choices: [
`Breath of the Wild`,
`Ocarina of Time`,
`Twilight Princess`,
`Wind Waker`],
answer: `Twilight Princess`,
},
//Question 4
{
question: `Finish this quote: “Courage need not be remembered, …”`,
choices:[
`for it is never lost.`,
`for it is never forgotten.`,
`because it is proven.`,
`for it is always there.`],
answer:`for it is never forgotten.`,
},
//Question 5
{
question: `The Legend of Zelda(NES) is known for being the first video game that…`,
choices:[
`had music.`,
`allowed saving.`,
`had color.`,
`was released on the NES.`],
answer: `allowed saving.`,
},
//Question 6
{
question: `Who is the main antagonist a majority of The Legend of Zelda series?`,
choices:[`Ganon`,
`Zant`,
`Ghirahim`,
`Majora`],
answer: `Ganon`,
},
//Question 7
{
question: `Which of The Legend of Zelda games was the first to not have the usual main villain?`,
choices:[`Minish Cap`, `Skyward Sword`, `The Legend of Zelda II`, `Majora’ s Mask`],
answer: `The Legend of Zelda II`,
},
//Question 8
{
question:`What is the Hero’ s name ?`,
choices:[
`Zelda`,
`Link`,
`Epona`,
`Shiek`
],
answer:`Link`,
},
//Question 9
{
question: `How many hearts do you need in Breath of the Wild to get the Master Sword?`,
choices:[`13`, `10`, `20`, `15`],
answer: `13`,
},
//Question 10
{
question: `Who develops the Legend of Zelda(series)?`,
choices:[`Sony`, `Microsoft`, `Sega`, `Nintendo`],
answer:`Nintendo`,
}
];
const OUTCOMES = {
perfect: {
message: `You are worthy of holding the Master Sword at it's full power!`,
endImage: `images/fullpowermastersword.png`
},
great: {
message: `You are worthy of holding the Master Sword but it isn't at it's full potential.`,
endImage: `images/mastersword.png`
},
good: {
message: `You have drawn the Master Sword but it's damaged. Return it to the pedastal and try again.`,
endImage: `images/rustedmastersword.png`
},
fail: {
message: `You are not worthy. Here's a stick.`,
endImage: `images/treebranch.png`
},
}
let hearts = 10;
let brokenPots = 0;
function startQuest() {
$('#quizcontainer').on('click', '.startbutton', function (event) {
$('#quizcontainer').empty();
$('.potCounter').empty();
$('.potCounter').html(`<h1><span>Question:<span class ="brokenPots">0</span>/10</span></h1>`);
$('.brokenPots').text(1);
$('.heartcontainer').empty();
generateHearts(10);
$('#quizcontainer').append(generateQuestion());
});
}
function generateQuestion() {
if (brokenPots < STORE.length) {
return generateQuiz(brokenPots);
} else {
$('#quizcontiner').empty();
heartsRemaining();
$('.brokenPots').text(10);
}
}
function generateQuiz(questionIndex) {
let dungeonMaker = $(`<form>
<fieldset class="choices">
<legend class="questionText">${STORE[questionIndex].question}</legend><br>
</fieldset>
</form>`)
let fieldFinder = $(dungeonMaker).find('fieldset');
STORE[questionIndex].choices.forEach(function (choicesValue, choicesIndex) {
$(`<label class="choices" for="${choicesIndex}">
<input type="radio" class="select" id="${choicesIndex}" value="${choicesValue}" name="answer" required>
<span>${choicesValue}</span>
</label>
`).appendTo(fieldFinder);
});
$(`<br><button type="submit" class="submitButton press">Submit</button >`).appendTo(fieldFinder);
return dungeonMaker;
}
function submitChoice() {
$('#quizcontainer').on('submit', function (event) {
const chosen = $('input:checked');
const choice = chosen.val();
const correct = STORE[brokenPots].answer;
if (choice === correct) {
correctChoice();
} else {
wrongChoice();
}
});
}
function correctChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>Correct!</h3>
<br>
<button type="button" class="nextButton press">Next</button>`
)
updateHearts(true);
}
function wrongChoice() {
$('#quizcontainer').empty();
$('#quizcontainer').append(
`<h3>You took some damage.</h3>
<span class="next">Correct Answer is:</span>
<span class="next">${STORE[brokenPots].answer}</span>
<br>
<button type="button" class="nextButton press">Next</button>`
);
updateHearts(false);
}
function nextQuestion() {
$('#quizcontainer').on('click', '.nextButton', function (event) {
$('#quizcontainer').empty();
updatePotsBroken();
$('#quizcontainer').append(generateQuestion());
});
}
function updatePotsBroken() {
brokenPots++;
$('.brokenPots').text(brokenPots + 1);
}
function generateHearts(number) {
for (i = 1; i <= number; i++) {
$('.heartcontainer').append(`<img src=images/full.png class='fullheart'>`);
}
}
function updateHearts(answer) {
if(!answer) {
$(`.fullheart:nth-child(${brokenPots + 1})`).attr("src","images/empty.png");
hearts--;
}
}
function heartsRemaining() {
const questResult = countHearts();
$("#quizcontainer").append(`<h1>${questResult.message}</h1>`);
//return (`<h1>${questResult.message}</h1>`)
}
function countHearts() {
if (hearts === 10) {
return OUTCOMES.perfect;
} else if (hearts < 9 && hearts >= 7) {
return OUTCOMES.great;
} else if (hearts < 6 && hearts >= 3) {
return OUTCOMES.good;
} else {
return OUTCOMES.fail;
}
}
function restartQuest() {
hearts = 10;
brokenPots = 0;
generateHearts(3);
$('.brokenPots').text(0);
}
function handledrawSword() {
startQuest();
generateQuestion();
submitChoice();
nextQuestion();
restartQuest();
}
$(handledrawSword);
* {
box-sizing: border-box;
border: 0;
padding: 0;
margin: 0;
cursor: url('images/cursor.gif'), auto;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
background-color: #5A8C58;
color: #F2C46D;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
main {
flex-grow: 1;
}
header,
main,
footer {
flex-shrink: 0;
}
.pagecontainer {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
main{
display: flex;
justify-content:center;
flex-direction: column;
}
.border{
margin: 10px 5px 10px 5px;
border: medium;
border-style: solid;
border-color: black;
background-color:#D9D3B4;
}
.background-image{
background-image: url("images/shield.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.headercontainer {
font-family: 'Press Start 2P', cursive;
font-size: 10px;
margin: 5px 10px 10px 10px;
}
.heartcontainer{
min-height: 35px;
}
.emptyheart, .fullheart{
margin: 7px 0px 0px 0px;
height:20px;
}
#quizcontainer{
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
min-width: 300px;
min-height: 300px;
}
.choices{
display: block;
}
.centercontainer{
display: flex;
justify-content:center;
flex-direction: row;
margin: 10px 0px 10px 0px;
}
.contactcontainer{
display: flex;
max-width: 500px;
flex-flow: row wrap;
justify-content: center;
align-content: center;
list-style: none;
}
.contactinfo {
height: 30px;
width: 30px;
margin: 0px 25px 0px 25px;
}
.press{
font-family: 'Roboto', sans-serif;
font-variant: small-caps;
font-size: 20px;
width: 4em;
height: 2em;
border: 3px;
border-style: outset;
color: #F2C46D;
background-color:#E8591A;
margin: 5px 0px 5px 0px;
}
.press:active{
border: 3px;
border-style: inset;
}
.press:hover {
background-color:#BD4715;
}
@media only screen and (min-width: 769px) {
main{
display: flex;
justify-content:center;
flex-direction: column;
min-width: 770px;
min-height: 770px;
}
}
<div class="pagecontainer">
<main>
<div class="count border">
<header>
<div class="headercontainer potCounter">
<br>
<h1>Are you Worthy of the Master Sword?</h1>
</div>
</header>
</div>
<div class="health border">
<section>
<div class="heartcontainer">
</div>
</section>
</div>
<div class="quiz border background-image">
<section>
<div id="quizcontainer">
<div class="startcontainer">
<span>
Test your knowlodge on "The Legend Zelda Series" to see if you are worthy of
wielding the Master Sword!
</span>
<br>
<br>
<button class="press startbutton">Start</button>
</div>
</section>
</div>
</main>
<footer>
<div class="centercontainer">
<div class="border">
<ul class="contactcontainer">
<li><a href="mailto:#" target="_top"><img src="images/email.png"
class="contactinfo" alt="Email Icon" /></a></li>
<li><a href="#" target="_blank"><img src="images/webpage.png" class="contactinfo"
alt="Website Icon" /></a></li>
<li><a href="#" target="_blank"><img
src="images/linkedin.png" class="contactinfo" alt="LinkedIn Icon" /></a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</div>