Can someone help correct my JavaScript code and explain the necessary steps taken to do so? I'm trying to figure out what mistake caused my quiz questions and options to not display correctly within the central div.
Giving some background on my code: it's a two-question form, where the results should appear at the top of the page after clicking the Evaluate button. However, my current focus is on making sure the quiz is visible on the HTML/CSS page.
Link to CodePen: Check out my code here
const quizQuestions = {
questions = {
question: "What is the capital city of Pará?",
alternatives: {
0: "São Paulo",
1: "Guarulhos",
2: "Campinas",
3: "São Bernardo do Campo",
4: "São José dos Campos",
5: "Santo André",
6: "Ribeirão Preto",
7: "Belém",
answer: "7"
},
{
question: "Which city is the capital of Amapá state?",
alternatives: {
0: "Osasco",
1: "Sorocaba",
2: "Mauá",
3: "Macapá",
4 "São José do Rio Preto",
5: "Mogi das Cruzes",
6: "Santos",
answer: "3"
};
document.getElementByClassName('.quiz-container ').addEventListener('click', function() {
let container =
document.querySelector('.quiz-container');
container.innerHTML = '<div class="quiz-container"></div>';
for (const [key, value] of Object.entries(quizQuestion.alternatives)) {
container.innerHTML += `<input type="radio" name="choice" value="${key}"> ${value}`;
}
container.innerHTML += '<div><button type="submit" id="submit-button">Evaluate</button></div>';
document.getElementById('submit2').addEventListener('click', function(event) {
console.log('asdf');
event.preventDefault();
var selected = document.querySelector('input[type="radio"]:checked');
if (selected && selected.value == quizQuestion.answer) {
alert('Correct answer!');
} else {
alert('Incorrect answer :(');
}
});
});body {
background: rgb(209, 29, 83);
margin: 0;
}
h1 {
background: rgb(255, 184, 201);
height: 60px;
margin: 0;
padding-left: 20px;
padding-top: 20px;
font-size: 45px;
text-shadow: 3px 3px 9px;
color: rgb(43, 29, 14);
}
.quiz-container {
text-align: left;
font-size: 25px;
background: rgb(255, 209, 220);
width: 700px;
height: 4000px;
margin: auto;
margin-top: 100px;
box-shadow: 9px 9px 10px;
margin-bottom: 60px;
}
button {
margin-left: 900px;
padding-top: 0;
margin-bottom: 60px;
}
.questions {
color: #000000;
text-align: center;
font-size: 15px;
}<head>
<h1>Brazilian Quiz Centered Theme</h1>
</head>
<body>
<div class="quiz-container"></div>
<div>
<button type="submit" id="submit-button">Evaluate</button>
</div>
<script src="js/main.js"></script>
</body>