Jul 12, 2018 How to Make a Basic JavaScript Quiz. WikiHow is a wiki similar to Wikipedia, which means that many of our articles are written collaboratively. To create this article, 11 people, some anonymous, worked to edit and improve it over time. This article has also been viewed 14,628 times. Set up your programming environment. This is a simple quiz program written in Java. Quiz data are stored in two files. One for questions and their answer choices and another one for storing the correct answers. You can add more questions and answer choices to the files.
Following quiz provides Multiple Choice Questions (MCQs) related to Core Java. You will have to read all the given answers and click over the correct answer. If you are not sure about the answer then you can check the answer using Show Answer button. You can use Next Quiz button to check new set of questions in the quiz.
Q 1 - What is the size of byte variable?
Answer : AExplaination
The byte data type is represented by an 8-bit signed two's complement integer.
Minimum value: -128
Maximum value: 127
Q 2 - What is the size of boolean variable?
Answer : BExplaination
The boolean data type can take either true or false, but its 'size' isn't precisely defined.
Q 3 - What is the default value of char variable?
Answer : AExplaination
char variable has default value of 'u0000' if defined as an instance/static variable.
Q 4 - What is polymorphism?
Answer : BExplaination
Polymorphism is the ability of an object to take on many forms. The most common use of polymorphism in OOP occurs when a parent class reference is used to refer to a child class object.
Q 5 - What is class variable?
Answer : AExplaination
Class variables are variables declared with in a class, outside any method, with the static keyword.
Q 6 - What is TreeSet Interface?
Answer : BExplaination
TreeSet is a Set implemented when we want elements in a sorted order.
Q 7 - What is composition?
Answer : CExplaination
Holding the reference of the other class within some other class is known as composition. It represents a HAS-A relationship. For example, a Student has a Pen. Here Student class has Pen as its instance variable.
Q 8 - What is Deserialization?
Answer : AExplaination
Deserialization is the process of restoring state of an object from a byte stream.
Q 9 - Deletion is faster in LinkedList than ArrayList.
Answer : AExplaination
Deletion in linked list is fast because it involves only updating the next pointer in the node before the deleted node and updating the previous pointer in the node after the deleted node.
Q 10 - which operator is considered to be with highest precedence?
Answer : AExplaination
Postfix operators i.e () [] . is at the highest precedence.
“How do I make a JavaScript quiz?” — this is one of the most common questions I hear from people who are learning web development, and for good reason. Quizzes are fun! They are a great way of learning about new subjects and allow you to engage your audience in a fun, yet playful manner.
And coding your own JavaScript quiz is a fantastic learning exercise. It teaches you how to deal with events, handle user input, manipulate the DOM, provide the user with feedback and keep track of their score (for example, using client-side storage). And when you have your basic quiz, there are a whole host of possibilities to add more advanced functionality, such as pagination. I go into this at the end of the article.
In this tutorial I will walk you though creating a multi-step JavaScript quiz which you will be able to adapt to your needs and add to your own site. If you’d like to see what we’ll be ending up with, you can skip ahead and see the working quiz.
Things to be Aware of Before Starting
A few things to know before starting:
The Basic Structure of Your JavaScript Quiz
Ideally, we want to be able to list our quiz’s questions and answers in our JavaScript code and have our script automatically generate the quiz. That way, we won’t need to write a bunch of repetitive markup, and we can add and remove questions easily.
To set up the structure of our JavaScript quiz, we’ll need to start with the following HTML:
Here’s how that would look:
Then we can select these HTML tags and store references to these elements in variables like so.:
Next we’ll need a way to build a quiz, show results, and put it all together. We can start by laying out our functions, and we’ll fill them in as we go:
Here, we have functions to build the quiz and show the results. We’ll run our
buildQuiz function immediately, and we’ll have our showResults function run when the user clicks the submit button.
Displaying the Quiz Questions
The next thing our quiz needs are some questions to display. We’ll use object literals to represent the individual questions and an array to hold all of the questions that make up our quiz. Using an array will make the questions easy to iterate over.
Feel free to put in as many questions or answers as you want.
Now that we have our list of questions, we can show them on the page. We’ll go through the following JavaScript line by line to see how it works:
First, we create an
output variable to contain all the HTML output including questions and answer choices.
Next, we can start building the HTML for each question. We’ll need to loop through each question like so:
For brevity, we’re using an arrow function to perform our operations on each question. Because this is in a forEach loop, we get the current value, the index (the position number of the current item in the array), and the array itself as parameters. We only need the current value and the index, which for our purposes, we’ll name
currentQuestion and questionNumber respectively.
Now let’s look a the code inside our loop:
For each question, we’ll want to generate the right HTML, and so our first step is to create an array to hold the list of possible answers.
Yes No Username: XxKevinxX4827 Password: Noobie5492 Other: Just take my account Stats: • 43% success rate • 1467 votes • 7 months old Did this login work?
Next, we’ll use a loop to fill in the answer choices for the current question. For each choice, we’re creating an HTML radio button. Notice we’re using template literals, which are strings but more powerful. We’ll make use of the following features:
Once we have our list of answer buttons, we can push the question HTML and the answer HTML onto our overall list of outputs.
Notice that we’re using a template literal and some embedded expressions to first create the question div and then create the answer div. The
join expression takes our list of answers and puts them together in one string that we can output into our answers div.
Now that we’ve generated the HTML for each question, we can join it all together and show it on the page:
Now our
buildQuiz function is complete.
Displaying the Quiz Results
At this point, we want to build out our
showResults function to loop over the answers, check them, and show the results.
Here’s the function, which we’ll go through in detail next:
First, we’ll select all the answer containers in our quiz’s HTML. Then we’ll create variables to keep track of the user’s current answer and the total number of correct answers.
Now we can loop through each question and check the answers.
The general gist of this code is:
Let’s look more closely at how we’re finding the selected answer in our HTML:
First, we’re making sure we’re looking inside the answer container for the current question.
In the next line, we’re defining a CSS selector that will let us find which radio button is checked.
Then we’re using JavaScript’s
querySelector to search for our CSS selector in the previously defined answerContainer . In essence, this means that we’ll find which answer’s radio button is checked.
Finally, we can get the value of that answer by using
.value .
Dealing with Incomplete User Input
But what if the user left an answer blank? Then using
.value would cause an error because you can’t get the value of something that’s not there. To solve this, we’ve added || , which means “or” and {} which is an empty object. Now the overall statement says:
Java Quiz Program Code
As a result, the value will either be the user’s answer or
undefined , which means a user can skip a question without crashing our quiz.
Java Quiz CodeEvaluating the Answers and Displaying the Result
The next statements in our answer-checking loop will let us handle correct and incorrect answers.
If the user’s answer matches the correct choice, increase the number of correct answers by one and (optionally) color the set of choices green. If the answer is wrong or blank, color the answer choices red (again, optional).
Once the answer-checking loop is finished, we can show how many questions the user got right:
And now we have a working JavaScript quiz!
If you’d like, you can wrap the whole quiz in an IIFE (immediately invoked function expression), which is a function that runs as soon as you define it. That way, your variables will stay out of global scope and your quiz won’t interfere with any other scripts running on the page.
Now you’re all set! Feel free to add or remove questions and answers and style the quiz however you like.
At this point, your quiz might look like this (with a tiny bit of styling):
See the Pen Simple JavaScript Quiz (ES6) V3 (No Params) by SitePoint (@SitePoint) on CodePen.
Adding Pagination
Now we have our basic quiz running, let’s have a look at some more advanced features. For example, let’s say you want to show only one question at a time.
You’ll need:
We’ll need to make some updates, so let’s start with the HTML:
A lot of the markup is the same as before, but now we’ve added navigation buttons and a quiz container. The quiz container will help us position the questions as layers that we can show and hide.
Inside the
buildQuiz function, add a <div> element with class slide to hold the question and answer containers you already created.
Next, you can use some CSS positioning to make the slides sit as layers on top of one another. In this example, you’ll notice we’re using z-indexes and opacity transitions to allow our slides to fade in and out. Here’s how that CSS might look:
Now we’ll add some JavaScript to make the pagination work.
We can start with some variables to store references to our navigation buttons and keep track of which slide we’re on:
Next we’ll write a function to show a slide.
Here’s what the first three lines do:
The next lines introduce the following logic:
Create A Quiz Program In Java Free
After we’ve written our function, we can immediately call
showSlide(0) to show the first slide.
Next we can write functions to make the navigation buttons work:
Create A Quiz Program In Java Download
Here, we’re making use of our
showSlide function to allow our navigation buttons to show the previous slide and the next slide.
Sample Program In Java Programming
Now your quiz has working navigation!
See the Pen Simple JavaScript Quiz (ES6) V4 (Stylized) by SitePoint (@SitePoint) on CodePen.
What’s next?
Now that you have a basic JavaScript quiz, it’s time to experiment.
Maybe you could try different ways of responding to a correct answer or a wrong answer. Maybe you’ll find a creative use for the concepts in this type of quiz.
Here are some suggestions you can try:
Create A Quiz Program In Java Pdf
Create A Quiz Program In Java
If you have questions or comments or if you’ve made an interesting quiz, feel free to share in the comments section below.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |