Okay, so today I decided to mess around with building a little quiz app. I’m calling it “yingzhu quiz” for now, just because. It’s nothing fancy, but I wanted to see if I could put something together quickly.
First, I started by sketching out what I wanted. Just a basic question, a few answer choices, and a way to tell if you got it right or wrong. I kept it super simple in my notebook – no need for anything complicated at this stage.
Then, I fired up my code editor. I figured I’d use plain HTML, CSS, and JavaScript. It’s the easiest way to get something like this up and running without too much fuss.
I started with the HTML. I created a to hold the question, and then a few more s for the answer choices. I also added a button to submit the answer. I even added an empty underneath where I could show if the answer was correct or not.
Here is the HTML code I ended up with:
Question:
What does HTML stand for?
Answer Choices:
Submit Answer:
Result:
Next up, a little bit of CSS to make it look… well, not terrible. I didn't spend too much time on this, just added some basic styling to make the choices look like buttons and give everything a bit of space.
Here is my simple CSS:
css
#quiz {
width: 500px;
margin: 50px auto;
border: 1px solid #ccc;
padding: 20px;
.choice {
border: 1px solid #ddd;
padding: 10px;
margin: 5px 0;
cursor: pointer;
.choice:hover {
background-color: #eee;
#result {
font-weight: bold;
margin-top: 10px;
Now for the fun part – the JavaScript! I wrote a little function that checks the selected answer against the correct answer. If it's right, it'll display "Correct!", otherwise, it'll show "Wrong!". I also made the choices clickable, so they highlight when you select one.
javascript
const choices = *('.choice');
const submitButton = *('submit');
const resultDisplay = *('result');
const correctAnswer = 'a'; // Hyper Text Markup Language
let selectedChoice = null;
// Highlight the selected choice
*(choice => {
*('click', () => {
// Remove highlight from previous selection
if (selectedChoice) {
* = '';
// Highlight current selection
selectedChoice = choice;
* = '#aaf';
// Check the answer when the button is clicked
*('click', () => {
if (selectedChoice) {
if (* === correctAnswer) {
* = 'Correct!';
* = 'green';
} else {
* = 'Wrong!';
* = 'red';
} else {
* = 'Please select an answer.';
* = 'black';
I hooked up event listeners to the answer choice s and the submit button. That way, when you click an answer, it gets stored, and when you click submit, the checkAnswer function runs.
And that's pretty much it! It's a super basic quiz, but it works. I learned a few things along the way, especially about how to handle user input and update the display. It's not going to win any awards, but it was a fun little project to tackle.
