A Trivia game made with the tidbit information I know about the world. Featuring my capabilities of DOM control using Javascript. I demonstrate interactive visuals and Html manipulation via user input. CSS features include responsiveness to mobile devices.
Visit my Github page on mobile or browser!
To play, visit the view demo link. The game is scored based on your accuracy of questions answered right in the top right corner. Try to guess the right answer to get an 80% accuracy rate to win the game!
I faced various challenges making this project since it was my first time using javascript for DOM control.
My first challenge didn't affect the function of my code but would give an error code on the console. Could I leave it be? Of course not! I couldn't let potential employers see ANY bugs.
The error code was Cannot set properties of null (setting 'onclick'). Which happened when a button was clicked to move to the next file. Once on the next file, javascript would look for a class that wasn't in that Html file and thus, an error code. The simple solution was to add the onclick attribute onto Html tag and give it a file path. The solution I went for was a switch case, because I felt it was a bit more involved for practicing JS.
switch(page) {
case 'index-body':
indexPage();
break;
case 'inst-body':
instPage();
break;
case 'game-body':
gamePage();
}
Each Html file has a unique class on the body, so the switch case just looks for which class is on the current file's body tag. The code for that specific file is then invoked.
The second challenge has the solution I'm most proud of. In the game logic, I needed to dynamically make every button unclickable and also color coat buttons for right/wrong. The solution is the functions removeEvent & siblingColorChange. Both's core functionality is to grab the siblings of the current question's answer choices. I needed a solution to go into the parent sibling of whatever answer choice was clicked and then reference all the children- all the answer choices of the current question. The problem was that all the solutions I found online involved confusing for-loops since going through the parent/children object returned an Element object. I want to make readable and maintainable code, which led me to my solution.
function removeEvent(answerChoiceSiblings) {
Array.from(answerChoiceSiblings).forEach((sibling) => {
sibling.removeEventListener('click',check)
})
}
The key was to make the children into an array instead of leaving it as an Element object, which enabled me to use the forEach loop.
My core logic was checking if the answer choice is correct.
function check(choice) {
let answerChoiceSiblings = choice.target.parentElement.children
if (choice.target.classList=='game-answer correct') {
choice.target.style.backgroundColor= 'rgba(34, 251, 46, 0.7)'
next.style.display='block'
correctAnswers ++
accuracy = Math.floor((correctAnswers/totalSlides)*100)
counter.innerHTML =`Accuracy: ${accuracy}%`
removeEvent(answerChoiceSiblings)
}
else {
choice.target.style.backgroundColor = 'rgba(255, 72, 72, 0.8)'
next.style.display='block'
siblingColorChange(answerChoiceSiblings)
removeEvent(answerChoiceSiblings)
}
}
The function checks for the hard-coded correct class and changes styling to green or red depending if the right choice was picked. Accuracy is calculated every time a button is clicked and updated live using template literals. Colors are changed by taking advantage of the DOM's styling property.
I chose this challenge/issue I faced as its own section to highlight the utility of AI. It was a trivial problem every developer faces- the background image. I couldn't find any images that fit my criteria. The image needed to contain various cartoon styled question marks, grey-scaled, and there had to be a lot of them with variability in style. Google could only find corporate clip art of question marks and I needed something fun!
Dall.e has mainstreamed AI usage to make art, voice-to-text, music, etc. Why scroll through various google images trying to find something specific when I can use an AI art generator? Heck, I've seen people ask the AI for a squirrel in a knights armor, why couldn't I ask it for cartoon question marks? This definitely saved me time and the headache of having to find the perfect background image. Some fellow developers see AI as a threat, but I see it as a tool.
Jose Padilla - Jose.apadilla99@gmail.com
Project link - WDTKY-Trivia
- References to images, fonts, and the AI art can be found on my reference file with the following path: Misc -> References
- Hat tip to anyone whose code is used
- Badges/shields