Ok, code n00b here. I am trying to code out a trivia game. I FINALLY figured out how to display the question with the appropriate answers. Now, I have to figure out if the user clicked the correct answer or not. I think I need to use an if/else statement, but I am not entirely sure which steps I need to take next. Here is the link to the live site-- (I know there are some styling things left to do.
https://alyciamriley.github.io/Trivia-game-easier/
And here is my JS code- window.onload = function () {
var intervalId
var timer = 10;
var questionArray = [{
question: 'Who recorded the original version of the song "Hound Dog"?',
answers: ['Willa Mae "Big Mama" Thornton', 'Elvis Presley', 'Carl Perkins', 'Chuck Berry', 'Miley Cyrus'],
correctAnswer: 'Willa Mae "Big Mama" Thornton',
}, {
question: 'Who was marketed by her record company as the "female Elvis"?',
answers: ['Wanda Jackson', 'Janis Martin', 'Patsy Cline', 'Diana Ross', 'Miley Cyrus'],
correctAnswer: 'Janis Martin',
}, {
question: 'Who sang the 1957 song Whole Lotta Shakin Goin On?',
answers: ['Elvis Presley', 'Jerry Lee Lewis', 'Gene Vincent', 'Buddy Holly', 'Miley Cyrus'],
correctAnswer: 'Jerry Lee Lewis',
}, {
question: '"Rebel-Rouser", "Cannonball", and "Because They Are Young" were all hits by which artist?',
answers: ['The Big Bopper', 'Jerry Lee Lewis', 'Gene Vincent', 'Duane Eddy', 'Miley Cyrus'],
correctAnswer: 'Duane Eddy',
},
{
question: 'Who spent three weeks at No.1 in 1957 with “That’ll be the Day”?',
answers: ['Buddy Holly', 'June Carter', 'Little Richard', 'Fats Domino', 'Miley Cyrus'],
correctAnswer: 'Buddy Holly',
}];
//Start button starts game
//clearing the content works. Do not touch it.
$("#startGame").on("click", function () {
$("#startGame").replaceWith();
startTimer();
decrement();
firstQuestion();
//renderButtons();
})
//this is your timer. It is working. Do not touch it.
function startTimer() {
intervalId = setInterval(decrement, 1000);
}
function decrement() {
timer--;
$("#countdown").html("<span>" + timer + "<span>");
if (timer === 0) {
stopTimer();
}
}
function stopTimer() {
clearInterval(intervalId);
nextQuestion();
}
function firstQuestion() {
var randomQuestion = questionArray[Math.floor(Math.random() * questionArray.length)];
$("#question-display").html(JSON.stringify(randomQuestion.question));
renderButtons(randomQuestion);
}
function renderButtons(randomQuestion) {
//Cleared button div of any newly created buttons
$("#answer-display").empty();
//dynamically generates buttons for each answer
for (var i = 0; i < randomQuestion.answers.length; i++) {
var a = $("<button>");
//adds class to the button
a.addClass("btn-answer");
//adds a data attribute
a.attr("data-name", randomQuestion.answers[i]);
//labels button
a.text(randomQuestion.answers[i]);
//adds button to the button view div
$("#answer-display").append(a);
}
}
$("#answer-display").on("click", function(){
console.log("clicked");
});
};
Aucun commentaire:
Enregistrer un commentaire