Quiz application features various button states for optimal user interaction

I am in the process of creating a quiz that resembles the popular BuzzFeed quizzes such as THIS ONE. Although I have mapped out the logic and have an idea of how to code it to function similarly to the one provided in the link, I am encountering issues with the button states.

You can view a sample of my code on this fiddle: sample quiz

$(document).ready(function () {
                $('#btn1, #a1').click(function () {
                   $('#a1').removeClass("fadeout");                    
                   $('#a1').addClass("highlight");

                    $('#a2').removeClass("highlight");  
                    $('#a3').removeClass("highlight");  
                    $('#a4').removeClass("highlight");  
                    $('#a5').removeClass("highlight");  
                    $('#a6').removeClass("highlight");  
                   $('#a2').addClass("fadeout");
                   $('#a3').addClass("fadeout");
                   $('#a4').addClass("fadeout");
                   $('#a5').addClass("fadeout");
                   $('#a6').addClass("fadeout");
                   btn1.checked = "true";
                   btn2.checked = "";
                   btn3.checked = "";
                   btn4.checked = "";
                   btn5.checked = "";
                   btn6.checked = "";
                   window.alert(document.write(getElementById("btn1").value));

While coding for a single question, implementing effects like changing color on hover, reducing opacity of unselected choices, and turning selected choice blue is not challenging. However, when expanding to multiple questions, I realized using addClass and removeClass for each choice across all questions would be impractical from a coding perspective.

Are there more efficient methods to address this issue?

javascriptjquerycss

Answer №1

By utilizing the click event on the question div, you can add and remove classes using the special $this keyword.

$(document).ready(function () {
    $('.a_choice').click(function () {
        $(this).siblings().removeClass("highlight");
        $(this).siblings().addClass("fadeout");

        $(this).children('input').prop('checked', true);
        $(this).addClass('highlight');
        $(this).removeClass("fadeout");
    });
});

For more information, visit http://learn.jquery.com/javascript-101/this-keyword/

Answer №2

Incorporate a unique class into every button and retrieve them based on their class instead of their id

$('.quizbuttons').removeClass("fadeout");

Ensure that the buttons are assigned the class "quizbuttons" as follows:

<button class="quizbuttons"></button>

Apply this method to any element you are utilizing.

Sincerely,

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Integrating Images Seamlessly with Text using HTML and CSS

Still getting the hang of this! I'm working on a webpage with an image and text side by side in separate divs. I've positioned them correctly, but when I resize the page, the text changes size while the image stays the same. I want the text to al ...

htmlcssimageresize

What is the process for inheriting HTML templates?

I am currently utilizing KnockoutJS along with its default template engine. My goal is to establish a master template that can serve as a foundation for other templates to build upon, similar to a UserControl in .NET but within an HTML context. For instan ...

jqueryhtmlknockout.js

Using jQuery UI to make elements sortable and draggable, while also retrieving the index of the dragged element

I encountered a specific issue while using jQuery UI sortable and draggable simultaneously. My goal is to determine the index or placement of the newly dragged element within the list. I am able to accomplish this when rearranging elements within the list. ...

jqueryjquery-uijquery-ui-sortablejquery-ui-draggable

CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, ...

jqueryhtmlcss

Error in processing large XML data: socket disconnect during express request

In my current project, I am facing the challenge of parsing a large 300MB XML file into JSON within a worker Node.js application. The workflow involves the client making a request to the main web app, which in turn sends a request to the worker server with ...

javascriptxmlnode.jsexpress

Position the Facebook Like Button in alignment with the counts box

Is it possible to align the Facebook likes count box at the bottom of my Like Button on my website? I'm looking for help with this task. Here is a visual representation of how I want the fb button to be positioned or styled: ...

asp.nethtmlcss

Exploring the Depths of Vue Router: Incorporating Dynamic Nested Routes

Hey everyone, I'm currently diving into working with the vue-router and Vuex Store. I'm facing a challenge where I have a route that consists of two dynamic parameters (:id, :templateId). My question is, what do I need to specify in my routes c ...

javascriptvue.jsvue-router

Vue Dynamic Table Title

Is it possible to add labels to a pivot-table in Vue without affecting array indexes and drag-and-drop functionality as shown in the screenshot below? https://i.stack.imgur.com/5JTSM.png Are there alternative methods for implementing this feature? You c ...

javascriptvuejs2pivot-table

Issues with executing AJAX calls on Android devices while using phonegap build

I am currently developing a phonegap app using PhoneGap Build. My AJAX call functions perfectly on my browser and on the Ripple Emulator. However, when I download the APK from PhoneGap Build and install it on a Samsung Galaxy 4, I encounter an error. Belo ...

phpandroidjqueryajaxcordova

Offspring of div should have equal height without the top and bottom padding

Looking to ensure that the height of child divs matches the height of the parent divs. Currently, the divs expand as the page is resized. This is for search results, so there are multiple identical code blocks. function matchHeight() { $result = $(&a ...

javascriptjqueryhtml

Advantages of optimizing NodeJS/TypeScript application by bundling it with webpack

Currently, I am working on a Node/Express application and I am interested in incorporating the most recent technologies. This includes using TypeScript with node/Express along with webpack. I have a question: What advantages come with utilizing webpack t ...

javascriptnode.jstypescriptwebpack

Contrast in output when using .has() versus :has()

I am dealing with a complex navigation structure that can be simplified as: <ul id="navigation"> <li> A <ul> <li> B <ul> <li>C</li&g ...

jquery

Tips for incorporating animation when opening a Jquery SimpleModal

The SimpleModal website features an animation-enabled example with the following sequence: 1. Display modal only 2. Fade in the overlay The code snippet for this animation is as follows: $("#the-div").modal({ onOpen: function (dialog) { dialog.overl ...

javascriptjquerymodal-dialogsimplemodal

Rotating SVG images with ease at any center point

I attempted to remove the unsupported animateTransform element: <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.2s" repeatCount="indefinite" /> and replaced it with CS ...

htmlcsssvg

Is it dependable to use jQuery to trigger ajax upon click in order to reliably work sequentially on the database?

Imagine there are 4 radio buttons on a webpage, and when any of them is clicked, it triggers an ajax call to save the button's value in a database. If the user clicks the first radio button (with a value of 1), an ajax call will be made to save this ...

jqueryajaxclickonclicklistener

The JQuery change() function may encounter issues if there is only a single option available within a select list

Currently, I am using jQuery to fetch data from a dynamically populated select list. The change() function in jQuery works perfectly when the select list has multiple options, but it fails to fire when there is only one option available. Below is a snipp ...

jquery

Simulation of loopback session

Currently, I am utilizing loopback in conjunction with express session to store cartId. However, for the purpose of making my tests function properly, it is essential that I inject cartId into the request session. Within my remote method, I have implemen ...

javascriptexpresssession-variablesloopback

What is the best way to ensure the second navbar stays at the top when scrolling, after the first one?

Looking for a solution to create a navbar with two distinct sections for contact info and the menu. The goal is to have the contact info disappear when scrolling down, while the menu remains fixed at the top of the page. When scrolling back up, the menu sh ...

htmlcss

The StreamingTextResponse feature is malfunctioning in the live environment

When I share my code, it's an API route in Next.js. In development mode, everything works as expected. However, in production, the response appears to be static instead of dynamic. It seems like only one part of the data is being sent. I'm puzzl ...

javascriptnode.jstypescriptnext.jslangchain

What is the interaction between Handlebars.js, jQuery, and Nodejs Express?

Currently, I am in the process of building a simple website using Express JS and Handlebars. The two main files involved are page1Router.js and page1Router.handlebars. Within the Handlebars file, you will find the following code snippet: <!DOCTYPE html ...

jqueryexpresshandlebars.js