我正在制作测验应用程序,但是我无法弄清楚如何进行特定的活动。一开始我想做的是,向Zelda致敬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>
这个:
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--;
}
}
[这里我也传递一个arg(如果答案正确与否)。如果错了,我会换一颗空的心(使用不同的类)。我改变的心脏数量与问题相同:${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>
EDIT 1为管理图像而不是字体进行了一些更改。在此代码段中,您看不到图像更改,但是如果复制并粘贴此代码,它们将起作用。在HTML上也要小心:我从divheartcontainer
中删除了所有的代码:它们是随脚本一起添加的。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>