#bryanDevs Presents: JavaScript Journey Episode 1
Basic Quiz Interaction Using JS
By Bryan Ganzon Granse
Welcome to the first episode of JavaScript Journey by Bryan Ganzon Granse. In this episode, we will be learning about basic quiz interaction using JavaScript.
JavaScript is a powerful programming language that can be used to add interactivity and dynamic behavior to web pages. In this episode, we will be using JavaScript to create a simple quiz that allows users to answer questions and receive instant feedback.
To get started, let’s take a look at the HTML structure for our quiz:
<html>
<body>
<h1>JavaScript Quiz</h1>
<div id="quiz">
<p id="question">Question goes here</p>
<input type="text" id="answer">
<button onclick="checkAnswer()">Submit</button>
<p id="feedback"></p>
</div>
<script src="quiz.js"></script>
</body>
</html>
As you can see, we have a simple HTML structure for our quiz. We have a heading, a div element with an id of “quiz” where our quiz content will be displayed, and a script tag that links to an external JavaScript file called “quiz.js”.
Now, let’s take a look at the JavaScript code in our “quiz.js” file:
function checkAnswer() {
var userAnswer = document.getElementById('answer').value;
if (userAnswer === 'JavaScript') {
document.getElementById('feedback').innerText = 'Correct!';
} else {
document.getElementById('feedback').innerText = 'Incorrect. Try again!';
}
}
Our JavaScript code contains a function called “checkAnswer” which is called when the user clicks the submit button. This function retrieves the user’s answer from the input field, compares it to the correct answer, and displays feedback based on the user’s response.
With this simple example, we have demonstrated how JavaScript can be used to create interactive quizzes on web pages. I hope you found this episode helpful and stay tuned for more exciting JavaScript tutorials in the upcoming episodes!
