This is for a quiz. The user has a question with a choice of three answers. The answers are buttons. Each button has a value. When the user clicks the button, it gives a value then moves onto the next question. And this process repeats through a series of 7 questions. During this process, I want it to add each of the values clicked and have an accumulated total at the end.
I'm not sure if I should create a loop for this? I also want to note that this is being done without refreshing the page using .show and .hide features to the different sections of the quiz.
Thanks for your help!
Here are the buttons:
<button class="blue" id="goat" value="5">ANSWER 1</button>
<button class="blue" id="bird" value="10">ANSWER 2</button>
<button class="blue" id="fish" value="15">ANSWER 3</button>
function charValue () {
$(this).val();
}
var storedValue = $(this).$("button").data(charValue);
var accumValue = storedValue + charValue;
$("button").on('click', charValue);
You could add a final button at the end, for example:
<button id="finalbutton">Get Results</button>
And then create the javascript like so:
var accumValue = 0;
$("button").on('click', function() {
if(!$(this).attr('value')) {
return;
}
accumValue += parseInt($(this).attr('value'));
});
$('#finalbutton').on('click', function() {
alert(accumValue);
});
Try this:
$("button").click(function() {
var curScore = parseInt($("span").text(), 10);
var newScore = parseInt($(this).val(), 10);
$("span").text(curScore + newScore);
$(this).parent().hide();
$(this).parent().next().show();
});
.Question{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="Question" style="display: block;">
<h3>Question 1</h3>
<button class="blue" id="goat" value="5">ANSWER 1</button>
<button class="blue" id="bird" value="10">ANSWER 2</button>
<button class="blue" id="fish" value="15">ANSWER 3</button>
</div>
<div class="Question">
<h3>Question 2</h3>
<button class="blue" id="goat" value="5">ANSWER 1</button>
<button class="blue" id="bird" value="10">ANSWER 2</button>
<button class="blue" id="fish" value="15">ANSWER 3</button>
</div>
<div class="Question">
<h3>Question 3</h3>
<button class="blue" id="goat" value="5">ANSWER 1</button>
<button class="blue" id="bird" value="10">ANSWER 2</button>
<button class="blue" id="fish" value="15">ANSWER 3</button>
</div>
<p>The final score is <span>0</span>
</p>
You can use .val() to get value and sum them.
To hide the current question after choose an answer, and show next one, use code:
$(this).parent().hide();
$(this).parent().next().show();
you can use below code and show sum at the end, DEMO here
var sum= 0;
$("button").click(function() {
sum = sum + parseInt($(this).val());
//alert(sum);
});
You can put all your questions on the same page.
As the user completes the questions, hide the completed questions and show the next unanswered question.
every time one answers a question, add the selected answer to your submission form. When the user finished all the questions show the submit button, and let one submit his answers.
Related
I have an rate app box,
I want the user to rate the app from 1-5 by clicking one of five buttons.
The button that was clicked should have color, all the others none. So if he clicked first on 3 and then 2, when clicking on 2 the color from the 3 button will be removed so only the last button was clicked (in this case 2) will have a color.
I DID manage to do it using button array, but i know for sure there is shorter way that isnt involved button array, only by code inside the function.
html:
<body>
<div class="container">
<div class="img-container">
<img src="./images/icon-star.svg" alt="" class="img-star">
</div>
<div class="content">
<h1>How did we do?</h1>
<p id="content-paragraph">
Please let us know how we did with your support request. All feedback is appreciated
to help us improve our offering!
</p>
</div>
<div class="buttons-container">
<button value = 1 class="choose " id="btn-one" onclick="paintBtn(this)">1</button>
<button value = 2 class="choose" id="btn-two" onclick="paintBtn(this)">2</button>
<button value = 3 class="choose" id="btn-three" onclick="paintBtn(this)">3</button>
<button value = 4 class="choose" id="btn-four" onclick="paintBtn(this)">4</button>
<button value = 5 class="choose" id="btn-five" onclick="paintBtn(this)">5</button>
</div>
<form action="thankYou.html">
<button id="submit">SUBMIT</button>
</form>
<script src="index.js"></script>
</body
js:
const buttonOne = document.getElementById("btn-one")
const buttonTwo = document.getElementById("btn-two")
const buttonThree = document.getElementById("btn-three")
const buttonFour = document.getElementById("btn-four")
const buttonFive = document.getElementById("btn-five")
const buttonsArr = [buttonOne, buttonTwo, buttonThree, buttonFour, buttonFive]
function paintBtn(button) {
buttonsArr.map(btn => btn.classList.remove("btn-clicked"))
button.classList.add("btn-clicked")
}
The shorter way of doing and not having to pass every button inside an array would be to do a document.querySelectorAll(".choose") and with that way you would be able to access the NodeList of matching elements to your class.
You can examine it just like any array. If the array is empty (that is, its length property is 0), then no matches would be found.
Otherwise, you can use standard array notation to access the contents of the list. You can use any common looping statement, such as a forEach statement.
It works just fine as in the attached example.
function paintBtn(newClickedButton) {
// clear styling from buttons
let buttons = document.querySelectorAll(".choose");
buttons.forEach(function(button){
button.classList.remove("btn-clicked");
});
newClickedButton.classList.add("btn-clicked");
}
.btn-clicked{
background-color: red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="img-container">
<img src="./images/icon-star.svg" alt="" class="img-star">
</div>
<div class="content">
<h1>How did we do?</h1>
<p id="content-paragraph">
Please let us know how we did with your support request. All feedback is appreciated
to help us improve our offering!
</p>
</div>
<div class="buttons-container">
<button value = 1 class=" choose" id="btn-one" onclick="paintBtn(this)">1</button>
<button value = 2 class=" choose" id="btn-two" onclick="paintBtn(this)">2</button>
<button value = 3 class=" choose" id="btn-three" onclick="paintBtn(this)">3</button>
<button value = 4 class=" choose" id="btn-four" onclick="paintBtn(this)">4</button>
<button value = 5 class=" choose" id="btn-five" onclick="paintBtn(this)">5</button>
</div>
<form action="thankYou.html">
<button id="submit">SUBMIT</button>
</form>
<script src="index.js"></script>
</body>
use onclick functionallaity to solve this problem okay
You can use instead document.getElementsByClassName to search for the button that is currently clicked instead of searching and traversing through all of the buttons:
function paintBtn(newClickedButton) {
const clickedButtonClassName = "btn-clicked";
const clickedButton = document.getElementsByClassName(clickedButtonClassName)[0];
clickedButton.remove(clickedButtonClassName);
newClickedButton.classList.add(clickedButtonClassName);
}
I am beginner so please don't make too much fun of me, but I am having issues trying to get separate buttons to react when clicked. The current code that I have written will dim the all of the buttons when I click on only one of them. The problem is that I have 4 buttons and I want them to all be independent, but I don't want to type the same code 4 times for each of them.
Here is my HTML:
<div type="button" id="green" class="btn green">
</div>
<div type="button" id="red" class="btn red">
</div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow">
</div>
<div type="button" id="blue" class="btn blue">
</div>
</div>
Here is my jQuery code:
let buttonDim = function(){
$(".btn").on("click", function(){
$(".btn").addClass("pressed");
setTimeout(function(){
$(".btn").removeClass("pressed");
}, 100);
});
}
buttonDim();
I am aware that I have probably written the code ridiculously longer than it needs to be, but I am still learning.
Any help would be greatly appreciated, thank you.
Try js buttonDim() like this
$(".btn").on("click", function(){
var button=$(this);
button.addClass("pressed");
setTimeout(function()
{
button.removeClass('pressed');
}, 2000);
});
I need work in different div sections with same classnames.. so I need to work each div area specially...At last :
Question: here is the sample that only the area I want gie alert to me... but classname it counts for all in page.. I wanna the code only count in first area...
Alerting 2 = false what I want "Alert 1" as document.getElementsByClassName("aaa").length...
$(document).on("click","div#deneme_1 #deneme", function() {
var classayisi = document.getElementsByClassName("aaa").length;
alert (classayisi);
});
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="deneme_1"> <input class="aaa bbb" value="kkk"> <button id="deneme">try 1</button> </div>
<div id="deneme_2"> <input class="aaa bbb" value="nnn"> <button id="deneme">try 2</button> </div>
So you need to select the siblings of the button. JQuery has a siblings method. Vanilla JS you can select the parent and find the elements in it.
$(document).on("click","div > .deneme", function() {
var siblings = $(this).siblings('.aaa');
console.log(siblings.length);
var siblings2 = this.closest("div").querySelectorAll('.aaa');
console.log(siblings2.length);
});
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="deneme_1"> <input class="aaa bbb" value="kkk"> <button class="deneme">try 1</button> </div>
<div id="deneme_2"> <input class="aaa bbb" value="nnn"> <input class="aaa bbb" value="nnn"> <button class="deneme">try 2</button> </div>
The code below works for :
find "classnames" in "idnames" section , or div , or i tag etc...
$(this).closest('#idname').find(".classname").length;
Squares = Buttons with x = clicked, x = value
How do I create a textarea value onClick on a button that contains the value of each square AND empty values of anything that is not selected,
i.e.
<textarea>x,&bnsp;,&bnsp; ,&bnsp;\n,&bnsp;x,&bnsp; ,&bnsp;\n etc.</textarea>
Basically the text output needs to reflect the values of the squares in plain text, that’s why I need empty values to create that “visual”.
The rows and squares in each row are also subject to being dynamically generated when the page loads, based on a default or changed value.
Thank you!
It requires a bit of jQuery, but this does what you want.
var result = [];
var idnum;
for (var i = 1; i < 10; i++) {
result.push($("#" + i).html() + ",");
}
$(".result").html(result);
$(".button").click(function() {
idnum = $(this).attr("id");
$(this).html("x");
result[idnum - 1] = "x,";
$(".result").html(result);
});
.button {
width: 50px;
height: 50px;
vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" id="1"> </button>
<button class="button" id="2"> </button>
<button class="button" id="3"> </button>
<br>
<button class="button" id="4"> </button>
<button class="button" id="5"> </button>
<button class="button" id="6"> </button>
<br>
<button class="button" id="7"> </button>
<button class="button" id="8"> </button>
<button class="button" id="9"> </button>
<br><br>
<textarea class="result">Result</textarea>
I have a div of 4 buttons, when I click on any button it redirects to the same page for all the buttons, I want to know which button the user has pressed before going to the next page, I've been trying, but couldn't find that.
Here is my code :
$( "#buttons" ).click(function() {
alert('button');
window.location.href = "score.html";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="countdown"></p>
<div id="buttons">
<button type="button" id="button1">button 1</button>
<button type="button" id="button2">button 2</button>
<button type="button" id="button3">button 3</button>
<button type="button" id="button4">button 4</button>
</div>
Do you have any idea
The element that the click started in is available as target on the event object passed into your handler, so (but see more below):
// Accept the event arg -------v
$( "#buttons" ).click(function(e) {
alert('button: ' + e.target.id); // <=== Use e.target.id to get its ID
// window.location.href = "score.html"; (commented out for live demo)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="countdown"></p>
<div id="buttons">
<button type="button" id="button1">button 1</button>
<button type="button" id="button2">button 2</button>
<button type="button" id="button3">button 3</button>
<button type="button" id="button4">button 4</button>
</div>
Note that that will do the alert whenever there's a click inside the #buttons div, even if it's not on a button. If you only want clicks on the buttons, you can use a selector with .on to only call you when the click went through a button. It will call your handler as though you had hooked the handler directly to the buttons, even though in fact you've hooked it to the #button div, and so we use this.id for the ID:
$( "#buttons" ).on("click", "button", function() {
alert('button: ' + this.id);
// window.location.href = "score.html"; (commented out for live demo)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="countdown"></p>
<div id="buttons">
<button type="button" id="button1">button 1</button>
<button type="button" id="button2">button 2</button>
<button type="button" id="button3">button 3</button>
<button type="button" id="button4">button 4</button>
</div>