Interactivity Improvement with JS

The Operator "focus()"

This function is specifically built for mouseless, touchpadless interactivity by using the "Tab" key to select an element:

This method makes the website feel really alive, because it feels it as you are focused on an element that's interactive.

Select Elements with Keyboard

Some individuals use keyboard instead of cursor on their laptops/PCs, because of unknown reasons - maybe their mouse or touchpad don't work anymore for instance. But that's not a problem if you add the "focus()" system onto your application:

This way your site visitors can use the "tab" key to select an element and press enter to interact with it (if its interactive).

"addEventListner()" Function

The "addEventListner" feature is a great way to make an element wait till a task a completed:

The button here for example listens for a click, but you can also change it to something else, like a key on your keyboard.

Make a question using the prior example

In this code, we use the "onclick" function, which is equal to "addEventListener". Its a one-question app:

The "onclick" listens for the "userAnswer" variable, which is given to understand that it expects a number. For the function we use an object that watches if the answer is right.

Previous instance into full quiz application

Using the prior code, you can implement a full quiz system. Here below is a questions function, where you can easily add more questions by adding more blocks into the "question" table:

Here we use a table structure for quiz, which is similar to JSON markdown. This way to make a question game is widely used, as its easy to add more asks from the site.