Expected to happen: When getting a 100% result in quiz a “prize” is displayed below the remarks which includes an image and embed code
What actually happened: It either did not work at all or it inserted it for all results and not just when full score is achieved.
I am very very new to programming so I am very out of my depth here, but I feel like this should be possible, however when trying to adjust the code it broke or did nothing at all.
Minimal Reproducible Example on codepen: https://codepen.io/Ariane-the-sasster/pen/qEdMEQN
HTML I want to be displayed in pop-up window (.modal-content-container) when 100% result is achieved
<a href="https://arianami.neocities.org/CatCafe.html"><img src="https://files.catbox.moe/wg0rom.gif"></a>
<textarea style="width:88px; height:31px; overflow:auto; padding:5px;"><a href="https://arianami.neocities.org"><img src="https://files.catbox.moe/wg0rom.gif"></a></textarea>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Naru chan's Cat Cafe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body onload="NextQuestion(0)">
<main>
<!-- creating a modal for when quiz ends -->
<div class="modal-container" id="score-modal">
<div class="modal-content-container">
<h1>Congratulations, Quiz Completed.</h1>
<div class="grade-details">
<p>Attempts : 12</p>
<p>Wrong Answers : <span id="wrong-answers"></span></p>
<p>Right Answers : <span id="right-answers"></span></p>
<p>Grade : <span id="grade-percentage"></span>%</p>
<p><span id="remarks"></span></p>
/*I want to add the HTML code to the remarks section of the grade-details*/
</div>
<div class="modal-button-container">
<button onclick="closeScoreModal()">Continue</button>
</div>
</div>
</div>
<div class="game-quiz-container">
<div class="game-details-container">
<h1>Score : <span id="player-score"></span> / 12</h1>
<h1> Question : <span id="question-number"></span> / 12</h1>
</div>
<div class="game-question-container">
<h1 id="display-question"></h1>
</div>
<div class="game-options-container">
<div class="modal-container" id="option-modal">
<div class="modal-content-container">
<h1>Please Pick An Option</h1>
<div class="modal-button-container">
<button onclick="closeOptionModal()">Continue</button>
</div>
</div>
</div>
<span>
<input type="radio" id="option-one" name="option" class="radio" value="optionA" />
<label for="option-one" class="option" id="option-one-label"></label>
</span>
<span>
<input type="radio" id="option-two" name="option" class="radio" value="optionB" />
<label for="option-two" class="option" id="option-two-label"></label>
</span>
<span>
<input type="radio" id="option-three" name="option" class="radio" value="optionC" />
<label for="option-three" class="option" id="option-three-label"></label>
</span>
<span>
<input type="radio" id="option-four" name="option" class="radio" value="optionD" />
<label for="option-four" class="option" id="option-four-label"></label>
</span>
</div>
<div class="next-button-container">
<button onclick="handleNextQuestion()">Next Question</button>
</div>
</div>
</main>
<script src="Quiz.js"></script>
</body>
</body>
</html>
CSS:
/*NARU QUIZ*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, quiz-body{
height: 100%;
}
quiz-body{
font-family: 'Arial', sans-serif;
}
quiz-main{
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.game-quiz-container{
width: 550px;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-width: 1px;
border-style: solid;
}
.game-details-container{
width: 80%;
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.game-details-container h1{
font-size: 1.2rem;
}
.game-question-container{
width: 80%;
height: 8rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid;
}
.game-question-container h1{
font-size: 1.1rem;
text-align: center;
padding: 3px;
}
.game-options-container{
width: 80%;
height: 12rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
font-size:0.96rem;
text-align: center;
}
.game-options-container span{
width: 13rem;
height: 3rem;
border: 1px solid;
background-color: #ffffff;
overflow: hidden;
}
span label{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s;
font-weight: 600;
color: black;
}
input[type="radio"] {
position: relative;
display: none;
}
input[type=radio]:checked ~ .option {
}
.next-button-container{
width: 50%;
height: 3rem;
display: flex;
justify-content: center;
}
.next-button-container button{
width: 8rem;
height: 2rem;
background: none;
color: black;
border: 1px solid;
cursor: pointer;
outline: none;
}
.next-button-container button:hover{
}
.modal-container{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
flex-direction: column;
align-items: center;
justify-content: center;
-webkit-animation: fadeIn 1.2s ease-in-out;
animation: fadeIn 1.2s ease-in-out;
}
.modal-content-container{
height: fit-content;
width: 25rem;
background-color: #6c5e7c;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-radius: 25px;
border-style: dashed;
border-width: 1px;
border-color: #382d44;
padding: 10px;
}
.modal-content-container h1{
font-size: 1.3rem;
height: 3rem;
color: ;
text-align: center;
}
.grade-details{
width: 15rem;
height: 10rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.grade-details p{
color: white;
text-align: center;
}
.modal-button-container{
height: 2rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-button-container button{
width: 10rem;
height: 2rem;
background: none;
outline: none;
border: 1px solid;
color: white;
font-size: 1.1rem;
cursor: pointer;
}
.modal-button-container button:hover{
}
@media(min-width : 300px) and (max-width : 350px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 0.8rem;
}
.game-question-container{
height: 6rem;
}
.game-question-container h1{
font-size: 0.9rem;
}
.game-options-container span{
width: 90%;
height: 2.5rem;
}
.game-options-container span label{
font-size: 0.8rem;
}
.modal-content-container{
width: 90%;
height: 25rem;
}
.modal-content-container h1{
font-size: 1.2rem;
}
}
@media(min-width : 350px) and (max-width : 700px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 1rem;
}
.game-question-container{
height: 8rem;
}
.game-question-container h1{
font-size: 0.9rem;
}
.game-options-container span{
width: 90%;
}
.modal-content-container{
width: 90%;
height: 25rem;
}
.modal-content-container h1{
font-size: 1.2rem;
}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
JS:
[
{
question: "What is Naru's pet cat named?",
optionA: "Nyanko",
optionB: "Maru",
optionC: "Koneko",
optionD: "Nyanchi",
correctOption: "optionA"
},
{
question: "What is Naru's Blood type?",
optionA: "AB",
optionB: "O",
optionC: "B",
optionD: "A",
correctOption: "optionC"
},
{
question: "What is special about Naru's Birthday?",
optionA: "Doll's Festival",
optionB: "Cat Day",
optionC: "Children's Day",
optionD: "Tanabata",
correctOption: "optionA"
},
{
question: "Why did Naru initially not like her given name?",
optionA: "It sounds scary",
optionB: "She hates thunderstorms",
optionC: "It sounds too masculine",
optionD: "It was the name her parents gave her",
correctOption: "optionD"
},
{
question: "What age did Naru meet Izumi and Makoto?",
optionA: "7 years old",
optionB: "6 years old",
optionC: "4 years old",
optionD: "5 years old",
correctOption: "optionC"
},
{
question: "What is Naru's favourite colour?",
optionA: "Pink",
optionB: "Yellow",
optionC: "Lilac",
optionD: "Red",
correctOption: "optionB"
},
{
question: "What is Naru's favourite food?",
optionA: "Oyakodon",
optionB: "Miso Soup",
optionC: "Karaage Chicken",
optionD: "Chicken Katsudon",
correctOption: "optionC"
},
{
question: "What is an accessory Naru is rarely seen without?",
optionA: "Rings",
optionB: "Necklace",
optionC: "Wristwatch",
optionD: "Chain Braclet",
correctOption: "optionA"
},
{
question: "What manga has Naru canonically read and quoted?",
optionA: "Dragon Ball",
optionB: "Boys Over Flowers.",
optionC: "Sailor Moon",
optionD: "One Piece",
correctOption: "optionD"
},
{
question: "In her 'Made Mood' card which pose is Naru doing with her hands?",
optionA: "Pointing",
optionB: "Finger Heart",
optionC: "Peace sign",
optionD: "Heart hand",
correctOption: "optionD"
},
{
question: "Why was Naru's hair brown in her first year?",
optionA: "She wanted to blend in more",
optionB: "She had a rebellious phase",
optionC: "She dyed it to match her crush",
optionD: "It's her natural hair colour",
correctOption: "optionC"
},
{
question: "What is Naru, above all, committed to?",
optionA: "Self-love",
optionB: "Caring for her friends",
optionC: "Modelling",
optionD: "Romance",
correctOption: "optionA"
},
{
question: "What has Naru said she adores in a person?",
optionA: "Tsundere",
optionB: "Hard-working",
optionC: "Tall and handsome",
optionD: "Brunettes",
correctOption: "optionB"
},
{
question: "Who are Naru's Roommates?",
optionA: "Mama, Sora and Wataru",
optionB: "Shu, Kuroo and Mao",
optionC: "Mika and Hinata",
optionD: "Himeru and Tetora",
correctOption: "optionD"
},
{
question: "What is Naru's current goal?",
optionA: "To have her own brand",
optionB: "To make a new fragrance line",
optionC: "To make her screen acting debut",
optionD: "To move overseas to model",
correctOption: "optionA"
},
{
question: "How tall is Naru?",
optionA: "174cm",
optionB: "171cm",
optionC: "176cm",
optionD: "179cm",
correctOption: "optionC"
},
{
question: "How does Naru refer to most people?",
optionA: "-chan",
optionB: "-kyun",
optionC: "-chin",
optionD: "-shi",
correctOption: "optionA"
},
{
question: "What is Naru's Feature Scout card called?",
optionA: "Elegant Fragrance",
optionB: "Alluring Fragrant Blossom",
optionC: "My Best Self",
optionD: "Dreaming Lady",
correctOption: "optionC"
},
{
question: "Who is Naru's Best Friend?",
optionA: "Kanata Shinkai",
optionB: "Ritsu Sakuma",
optionC: "Izumi Sena",
optionD: "Mika Kagehira",
correctOption: "optionD"
},
{
question: "How many siblings does Naru have?",
optionA: "One",
optionB: "Two",
optionC: "Four",
optionD: "Three",
correctOption: "optionA"
},
{
question: "What is Naru's title in knights?",
optionA: "Duchess",
optionB: "Princess",
optionC: "Big sister",
optionD: "Queen",
correctOption: "optionD"
},
{
question: "Who reminds Naru of 'That Person'?",
optionA: "Akiomi Kunugi",
optionB: "Leo Tsukinaga",
optionC: "Mika Kagehira",
optionD: "Mayoi Ayase",
correctOption: "optionB"
},
{
question: "What is the name of the circle Naru is a part of?",
optionA: "Magical6",
optionB: "Pretty5",
optionC: "Manga Club",
optionD: "CRAFTMONSTER",
correctOption: "optionB"
},
{
question: "Who composed Naru's event song 'Heart Collector'?",
optionA: "Leo Tsukinaga",
optionB: "Herself",
optionC: "Ritsu Sakuma",
optionD: "Izumi Sena",
correctOption: "optionC"
},
{
question: "How many piercings does she have?",
optionA: "Three",
optionB: "Four",
optionC: "Two",
optionD: "Six",
correctOption: "optionA"
}
]
let shuffledQuestions = [] //empty array to hold shuffled selected questions
function handleQuestions() {
//function to shuffle and push 10 questions to shuffledQuestions array
while (shuffledQuestions.length <= 11) { //update this to lenth of questions you want -1 i.e if you want 16 questions then <= 15
const random = questions[Math.floor(Math.random() * questions.length)]
if (!shuffledQuestions.includes(random)) {
shuffledQuestions.push(random)
}
}
}
let questionNumber = 1
let playerScore = 0
let wrongAttempt = 0
let indexNumber = 0
// function for displaying next question in the array to dom
function NextQuestion(index) {
handleQuestions()
const currentQuestion = shuffledQuestions[index]
document.getElementById("question-number").innerHTML = questionNumber
document.getElementById("player-score").innerHTML = playerScore
document.getElementById("display-question").innerHTML = currentQuestion.question;
document.getElementById("option-one-label").innerHTML = currentQuestion.optionA;
document.getElementById("option-two-label").innerHTML = currentQuestion.optionB;
document.getElementById("option-three-label").innerHTML = currentQuestion.optionC;
document.getElementById("option-four-label").innerHTML = currentQuestion.optionD;
}
function checkForAnswer() {
const currentQuestion = shuffledQuestions[indexNumber] //gets current Question
const currentQuestionAnswer = currentQuestion.correctOption //gets current Question's answer
const options = document.getElementsByName("option"); //gets all elements in dom with name of 'option' (in this the radio inputs)
let correctOption = null
options.forEach((option) => {
if (option.value === currentQuestionAnswer) {
//get's correct's radio input with correct answer
correctOption = option.labels[0].id
}
})
//checking to make sure a radio input has been checked or an option being chosen
if (options[0].checked === false && options[1].checked === false && options[2].checked === false && options[3].checked == false) {
document.getElementById('option-modal').style.display = "flex"
}
//checking if checked radio button is same as answer
options.forEach((option) => {
if (option.checked === true && option.value === currentQuestionAnswer) {
document.getElementById(correctOption).style.backgroundColor = "rgb(189, 228, 173)"
playerScore++
indexNumber++
//set to delay question number till when next question loads
setTimeout(() => {
questionNumber++
}, 1000)
}
else if (option.checked && option.value !== currentQuestionAnswer) {
const wrongLabelId = option.labels[0].id
document.getElementById(wrongLabelId).style.backgroundColor = "rgb(247, 150, 150)"
document.getElementById(correctOption).style.backgroundColor = "rgb(189, 228, 173)"
wrongAttempt++
indexNumber++
//set to delay question number till when next question loads
setTimeout(() => {
questionNumber++
}, 1000)
}
})
}
//called when the next button is called
function handleNextQuestion() {
checkForAnswer()
unCheckRadioButtons()
//delays next question displaying for a second
setTimeout(() => {
if (indexNumber <= 11) { //update this to number of questions you want -1. determines when there's no more question and should display answer
NextQuestion(indexNumber)
}
else {
handleEndGame()
}
resetOptionBackground()
}, 1000);
}
//sets options background back to null after display the right/wrong colors
function resetOptionBackground() {
const options = document.getElementsByName("option");
options.forEach((option) => {
document.getElementById(option.labels[0].id).style.backgroundColor = ""
})
}
// unchecking all radio buttons for next question(can be done with map or foreach loop also)
function unCheckRadioButtons() {
const options = document.getElementsByName("option");
for (let i = 0; i < options.length; i++) {
options[i].checked = false;
}
}
// function for when all questions being answered
function handleEndGame() {
let remark = null
let remarkColor = null
// condition check for player remark and remark color
if (playerScore <= 3) {
remark = "Fail"
remarkColor = "rgb(163, 42, 52)"
}
else if (playerScore >= 4 && playerScore < 7) {
remark = "Average Grades, You can do better."
remarkColor = "rgb(255, 187, 174)"
}
else if (playerScore >= 7 && playerScore < 12) {
remark = "Excellent, Keep the good work going."
remarkColor = "rgb(179, 235, 195)"
}
else if (playerScore = 12) {
remark = "100% Amazing!"
remarkColor = "rgb(196, 139, 230)"
}
//playerScore divided by new length of questions
const playerGrade = (playerScore / 12) * 100
//data to display to score board
document.getElementById('remarks').innerHTML = remark
document.getElementById('remarks').style.color = remarkColor
document.getElementById('grade-percentage').innerHTML = playerGrade
document.getElementById('wrong-answers').innerHTML = wrongAttempt
document.getElementById('right-answers').innerHTML = playerScore
document.getElementById('score-modal').style.display = "flex"
}
//closes score modal and resets game
function closeScoreModal() {
questionNumber = 1
playerScore = 0
wrongAttempt = 0
indexNumber = 0
shuffledQuestions = []
NextQuestion(indexNumber)
document.getElementById('score-modal').style.display = "none"
}
//function to close warning modal
function closeOptionModal() {
document.getElementById('option-modal').style.display = "none"
}
For further context I want the html image and text box to display below the “remarks” in this pop-up
[Image of Pop-up showing quiz resuts][1]
[1]: https://i.sstatic.net/UmbQz9fE.png
