JavaScript quiz with multiple questions - javascript

Below I’ve made a small quiz with 4 questions and questions 2,3 and 4 are hidden with CSS, but you can try to remove the style from CSS (".pytja2, .pytja3, .pytja4 { display: none;}") to see all questions or put a style of display: hidden to each question one by one and you will see them.
I did that because I would like to show the next question when I click on the button Next then next question will show after I click Next button each time.
But there’s a problem that I have with question 2 it’s not showing and it doesn’t show any error in Console Log and I added on JavaScript a function that when I click button Next then the first question would be hidden and it would show the next question, but I do not know what’s wrong.
<div class="quiz">
<div id="pytja1">
<span class="quest1">I am a ?</span>
<form class="questions1" action="">
<input class="correct" type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br>
<input id="bot" type="button" value="Next">
</form>
</div>
<div id="pytja2">
<span class="quest2">Football has letters ?</span>
<form class="questions2" action="">
<input class="correct" type="radio" name="gender" value="male"> 7<br>
<input type="radio" name="gender" value="female"> 5<br>
<input type="radio" name="gender" value="other"> 6<br>
<input id="bot" type="button" value="Next">
</form>
</div>
<div id="pytja3">
<span class="quest3">VV stands for ?</span>
<form class="questions3" action="">
<input type="radio" name="gender" value="male"> BMW <br>
<input class="correct" type="radio" name="gender" value="female"> Volksvagen<br>
<input type="radio" name="gender" value="other"> Audi<br>
<input id="bot" type="button" value="Next">
</form>
</div>
<div id="pytja4">
<span class="quest4">What year it is ?</span>
<form class="questions4" action="">
<input type="radio" name="gender" value="male"> 2017<br>
<input type="radio" name="gender" value="female"> 2015<br>
<input class="correct" type="radio" name="gender" value="other"> 2019<br>
<input id="bot-submit" type="submit" value="Submit">
</form>
</div>
</div>
.quiz{
margin-top: 50px;
margin-left: 40%;
width: 250px;
height: 100px;
background-color: coral;
}
.quest1{
background-color: cadetblue;
padding-right: 50px;
margin-left: 30px;
font-size: 22px;
}
.quest2{
background-color: cadetblue;
padding-right: 50px;
margin-left: 30px;
font-size: 22px;
position: absolute;
top: 3884px;
}
.quest3{
background-color: cadetblue;
padding-right: 50px;
margin-left: 30px;
font-size: 22px;
position: absolute;
top: 3884px;
}
.quest4{
background-color: cadetblue;
padding-right: 50px;
margin-left: 30px;
font-size: 22px;
position: absolute;
top: 3884px;
}
.questions1{
margin-left: 28px;
background-color: cyan;
width: 220px;
padding: 10px;
font-size: 20px;
}
.questions2{
margin-left: 28px;
background-color: red;
width: 150px;
padding: 10px;
font-size: 20px;
position: absolute;
top: 3925px;
}
.questions3{
margin-left: 28px;
background-color: greenyellow;
width: 150px;
padding: 10px;
font-size: 20px;
position: absolute;
top: 3925px;
}
.questions4{
margin-left: 28px;
background-color: olivedrab;
width: 150px;
padding: 10px;
font-size: 20px;
position: absolute;
top: 3925px;
}
.bot{
margin-top: 10px;
}
.pytja2,.pytja3,.pytja4{
display: none;
}
/* End of Quiz*/
let question2 = document.getElementById('pytja2');
let question3 = document.getElementById('pytja3');
let question4 = document.getElementById('pytja4');
let nextQuestion = document.getElementById('bot');
let result = document.getElementById('bot-submit');
nextQuestion.onclick = function () {
if (nextQuestion === question1) {
question1.style.display = 'none'
} else if (nextQuestion === question2) {
question2.style.display = 'block'
}
}

So, it appears there was some confusion on your use of bot as an ID and as a CLASS selector within your code. I took the liberty of cleaning this up and making it so the Next buttons use .bot as a class. If you're going to re-use a name value on an element, class is the syntax to use. ID is supposed to be specific to one element in the DOM.
Also, if you are creating a form to submit all answers, it would be better to declare <form> once, and then have each set of radio buttons contain the same name for each set of questions e.g (gender, car, etc.) so when you process the form, it will be easy to grab the selected choices by the user for each set of questions.
I cleaned up some of the CSS as well to help, and added a for loop that binds an onclick function to each Next button in the form, so upon each click, it will check the parentNode.Id to see what div elements it should hide and make visible for each next question block. This for loop is achieved by referencing the class .bot using document.querySelectorAll('.bot');
Please let me know if you have any further questions or need me to explain further the changes I made in the below snippet:
let question1 = document.getElementById('pytja1');
let question2 = document.getElementById('pytja2');
let question3 = document.getElementById('pytja3');
let question4 = document.getElementById('pytja4');
let result = document.getElementById('bot-submit');
let nextButtons = document.querySelectorAll('.bot');
for (let i = 0; i < nextButtons.length; i++) {
let nextQuestion = nextButtons[i];
nextQuestion.onclick = function() {
switchToNextQuestion(this);
}
}
function switchToNextQuestion(nextQuestion) {
let parentId = nextQuestion.parentNode.id;
if (parentId === 'pytja1') {
question1.style.display = 'none';
question2.style.display = 'block';
} else if (parentId === 'pytja2') {
question2.style.display = 'none';
question3.style.display = 'block';
} else if (parentId === 'pytja3') {
question3.style.display = 'none';
question4.style.display = 'block';
}
}
result.onclick = function() {
alert('I am submitting the quiz!');
}
form {
width: 100%;
position: relative;
float: left;
padding-top: 50px;
}
.quiz {
margin: 0px auto;
width: 250px;
height: 100px;
}
.quest1,
.quest2,
.quest3,
.quest4 {
background-color: cadetblue;
font-size: 22px;
}
.questions1 {
margin-left: 28px;
background-color: cyan;
width: 220px;
padding: 10px;
font-size: 20px;
}
.questions2 {
background-color: red;
}
.questions3 {
background-color: greenyellow;
}
.questions4 {
background-color: olivedrab;
}
.bot {
margin-top: 10px;
}
#pytja2,
#pytja3,
#pytja4 {
margin-left: 28px;
display: none;
width: 220px;
padding: 10px;
font-size: 20px;
}
/* End of Quiz*/
<form id="quiz-form">
<div class="quiz">
<div id="pytja1" class="questions1">
<span class="quest1">I am a ?</span><br/>
<input type="radio" name="gender" value="male" class="correct"> Male<br/>
<input type="radio" name="gender" value="female"> Female<br/>
<input type="radio" name="gender" value="other"> Other<br/>
<input class="bot" type="button" value="Next" />
</div>
<div id="pytja2" class="questions2">
<span class="quest2">Football has # letters ?</span><br/>
<input type="radio" name="football" value="8" class="correct"> 8<br/>
<input type="radio" name="football" value="5"> 5<br/>
<input type="radio" name="football" value="6"> 6<br/>
<input class="bot" type="button" value="Next" />
</div>
<div id="pytja3" class="questions3">
<span class="quest3">VW stands for ?</span><br/>
<input type="radio" name="car" value="BMW" /> BMW <br/>
<input type="radio" name="car" value="Volkswagen" class="correct" /> Volkswagen<br/>
<input type="radio" name="car" value="Audi" /> Audi<br/>
<input class="bot" type="button" value="Next" />
</div>
<div id="pytja4" class="questions4">
<span class="quest4">What year it is ?</span><br/>
<input type="radio" name="year" value="2017" /> 2017<br/>
<input type="radio" name="year" value="2015" /> 2015<br/>
<input type="radio" name="year" value="2019" class="correct" /> 2019<br/>
<input id="bot-submit" type="submit" value="Submit" />
</div>
</div>
</form>

Related

CSS styling my page, sorry guys im a noob

I have my website code below, however my problem is not with its functionality rather its with its appearance
var name;
var nameFormat = true;
var totalRight=0;
var welcomeName
$("#welcome2").hide();
$("#welcome2-0").hide();
$('form').hide();
$("#MYsubmit").hide();
var score;
function submission() {
var name = document.getElementById("textbox").value;
if (name.length > 0) {
alert("Welcome " + name);
$("#name").fadeOut(1000);
$("#welcome").fadeOut(1000);
$("#welcome2").show();
$("#welcome2-0").show();
$('MYsubmit').show();
$('form').show();
welcomeName=document.getElementById("welcome3-1").innerHTML +="Welcome "+name+"!"+"Good Luck!";
} else {
nameFormat == false;
alert("Please enter the name again");
}
}
var welcomeName=document.getElementById("Question1").innerHTML +="1. How long does it take the average person to fall asleep?";
var welcomeName=document.getElementById("Question2").innerHTML +="2.How many eggs does the average american eat per year?";
var welcomeName=document.getElementById("Question3").innerHTML +="3.How many taste buds does the average american have?";
var welcomeName=document.getElementById("Question4").innerHTML +="4.What is the average lifespan of a squirrel?";
var welcomeName=document.getElementById("Question5").innerHTML +="5.on average __% of all restaurant meals include potato chips";
function finalsubmit() {
if(document.getElementById('correctAnswer-1').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-2').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-3').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-4').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-5').checked) {
totalRight=totalRight+1;
}
document.getElementById("score").innerHTML +="RESULT for "+name+"You Scored "+totalRight+" out of 5!"+"<br>";
score=document.getElementById("ans").innerHTML +="You scored "+totalRight+" out of 5";
if(totalRight==5){
document.getElementById("score").innerHTML +="You score 5/5 PERFECT!";
}
}
/*
$(document).ready(function(){
$("#hint1").mouseover(function(){
$("#hint1").
});
$("#hint1").mouseout(function(){
$("#hint1").
});
});
*/
$(document).ready(function(){
$('#hint1').hover(function() {
$(this).text("7Minutes");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint2').hover(function() {
$(this).text("263Eggs");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint3').hover(function() {
$(this).text("10,000");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint4').hover(function() {
$(this).text("7Years");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint5').hover(function() {
$(this).text("7%");
},
function() {
$(this).text("[HINT]");
});
});
#welcome{
top:30px;
left: 30px;
color: antiquewhite;
border: 2px solid darkblue;
background: darkblue;
padding: 25px;
}
#name{
top:30px;
left: 500px;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
body {
background-color: lightblue;
color: white;
}
#welcome2{
text-align: center;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
#welcome3-1{
top:30px;
left: 500px;
color: Aqua;
background:darkblue;
border: 25px solid darkblue;
}
#welcome2-0{
text-align: center;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
.Question{
text-align: left;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
.hints{
color: aquamarine;
background: darkblue;
border: 25px solid darkblue;
}
.quiz{
background: darkblue;
}
#ans{
text-align: left;
border: 25px solid darkblue;
background: darkblue;
color:red;
}
#score{
background-color: yellow;
color:red;
background-size: 100px 100px;
}
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Welcome!</title>
<link rel="stylesheet" href="includes/styles.css" type="text/css" media="screen" />
</head>
<p>
<body>
<div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
<div id="name"><b>Name:</b>
<input type="text" id="textbox">
<button id=”myButton” type="button" onclick="submission()">submit</button>
</div>
<h1 id="welcome2">Myanmar Trivia Quiz </h1>
<div id="welcome2-0">Test your Demographic Knowledge<br>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
<div id="welcome3-1"><b></b></div>
<div id="ans"><h3></h3></div>
<form class="quiz">
<div id="Question1" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="7Minutes" id="correctAnswer-1" class="Answer"> 7 Minutes<br>
<input type="radio" name="radiobutton" value="5Minutes" >5 Minutes<br>
<input type="radio" name="radiobutton" value="20Minutes" >20 Minutes <br>
<input type="radio"name="radiobutton" value="14Minutes" >14 Minutes <br>
<div id="hint1" class="hints">[HINT]</div>
</form>
<form class="quiz">
<div id="Question2" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="263Eggs" id="correctAnswer-2">263 eggs a year<br>
<input type="radio" name="radiobutton" value="23Eggs">23 eggs a year<br>
<input type="radio" name="radiobutton" value="100Eggs">100 eggs a year<br>
<input type="radio" name="radiobutton" value="45Eggs">45 eggs a year<br>
<div id="hint2" class="hints">[HINT]</div>
</form>
<form class="quiz">
<div id="Question3" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="10,000" id="correctAnswer-3">10,000<br>
<input type="radio" name="radiobutton" value="4000">4000<br>
<input type="radio" name="radiobutton" value="20,000">20,000<br>
<input type="radio" name="radiobutton" value="537">537<br>
<div id="hint3" class="hints">[HINT]</div>
</form>
<form class="quiz">
<div id="Question4" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="7Years" id="correctAnswer-4"> 7 Years<br>
<input type="radio" name="radiobutton" value="5Years">5 Years<br>
<input type="radio" name="radiobutton" value="20Years">20 Years <br>
<input type="radio" name="radiobutton" value="14Years">14 Years <br>
<div id="hint4" class="hints">[HINT]</div>
<form class="quiz">
<div id="Question5" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="7%" id="correctAnswer-5"> 7%<br>
<input type="radio" name="radiobutton" value="5%">5%<br>
<input type="radio" name="radiobutton" value="20%">20%<br>
<input type="radio" name="radiobutton" value="14%">14%<br>
<div id="hint5" class="hints">[HINT]</div>
<br>
<br>
<button id=”MYsubmit” type="button" onclick="finalsubmit()">submit</button>
<div id="score"></div>
<div id="COPYRIGHT">Copyright © 2019. All rights reserved</div>
</form>
</body>
<script src="includes/scripts.js"></script>
</html>
. I would like the dark blue backgrounds touching each other, and I would like my radio buttons moved so they are below the answers,also I would like to do the same with the hint, and welcome comment. Im new with css so i apologize if its done poorly, im having a hard time figuring this one out and would appreciate any help. thank you guys alot!
Maybe you can use tooltip? Example from w3schools
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">HINT
<span class="tooltiptext">Put your hint here</span>
</div>
I'm pretty sure you should just use Tooltip instead of mouseover ^^
JQuery Tooltip
$("#hint1").tooltip();
with title as attribute for the texts.
Here's the Codepen Demo
I found the answer, skipped the animations but got it working using this code below:
$(document).ready(function(){
$('#hint2').hover(function() {
$(this).text("hover text");
},
function() {
$(this).text("back to origonal");
});
});

Radio button filled with color

I was trying to make my radio button looks like checkbox. I have made it OK but the problem i am facing when i tried to fill it up with color. Means in default stage it's white and when i clicked it fills with black. But now i want to make it as different colors based on title and when i clicked it should filled with that color only. How do i make it ?
<label class="active">
Email
<span></span>
<input type="radio" name="n1" value="email" checked>
</label>
<label>
Phone
<span></span>
<input type="radio" name="n1" value="phone">
</label>
<label>
Address
<span></span>
<input type="radio" name="n1" value="address">
</label>
Fiddle
You can add data-title to your label and give color to that and i have made a new style element which will change your style attribute of the radio button.
please check the below code
$(document).ready(function() {
$('label').click(function() {
var title = $(this).data('title');
$('.active').removeClass("active");
$(this).addClass("active");
$("<style> label.active span:after{ background-color: "+title+";} </style>").appendTo("head");
});
$('input:checked').trigger('click');
});
label {
width: 125px;
display: block;
float: left;
}
label input {
display: none;
}
label span {
display: block;
width: 17px;
height: 17px;
border: 1px solid black;
float: left;
margin: 0 5px 0 0;
position: relative;
}
label.active span:after {
content: "";
position: absolute;
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="active" data-title='red'>
Email
<span></span>
<input type="radio" name="n1" value="email" checked>
</label>
<label data-title='green'>
Phone
<span></span>
<input type="radio" name="n1" value="phone">
</label>
<label data-title='blue'>
Address
<span></span>
<input type="radio" name="n1" value="address">
</label>
<label data-title='orange'>
Address2
<span></span>
<input type="radio" name="n1" value="address">
</label>
<label data-title='#ff11dd'>
Using Color Code
<span></span>
<input type="radio" name="n1" value="address">
</label>
Having different colors based on a title (or a value)... I don't think it is possible with just CSS.
In revenge, since you exactly know their order, you can set different colors using nth-child(n).
Try:
label:nth-child(1).active span:after {
background: red;
}
label:nth-child(2).active span:after {
background: orange;
}
label:nth-child(3).active span:after {
background: green;
}
Updated Fiddle

On input field mouse hover display tooltip

I'm doing rating star when we hover on any star I want to display tooltip as far now I tried to like this there is a problem in jquery I couldn't target proper class name I don't have an idea how to write that class. I used input type radio and label how I will load this attributes in jquery can anyone suggest me to achieve that functionality.
thanks in Advance...
$(document).ready(function () {
$("input[name=rating]").on('mouseenter', showBox);
$("input[name=rating]").on('mouseleave', hideBox);
function showBox(e) {
var x = e.pageX - 80;
var y = e.pageY + 20;
$('#tooltip_block').fadeIn();
$('#tooltip_block').offset({ left: x, top: y });
}
function hideBox() {
$('#tooltip_block').fadeOut();
}
});
.rating_widgets {
display: flex;
justify-content: center;
margin-top: 25px;
}
.rating {
border: none;
float: left;
}
.rating > input {
display: none;
}
.rating > label:before {
margin: 5px;
font-size: 24px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
}
.rating > input:checked ~ label,
.rating:not(:checked),
.rating:not(:checked) {
color: #FFD700;
}
.rating > input:checked,
.rating > input:checked,
.rating > input:checked ~ label,
.rating > input:checked ~ label {
color: #FFED85;
}
#tooltip_block {
display: none;
position: absolute;
z-index: 1;
color: #ffffff;
background-color: #000;
}
<div class="rating_widgets">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" />
<label class="full" for="star5"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" />
<label class="half" for="star4half"></label>
<input type="radio" id="star4" name="rating" value="4" />
<label class="full" for="star4"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" />
<label class="half" for="star3half"></label>
<input type="radio" id="star3" name="rating" value="3" />
<label class="full" for="star3"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" />
<label class="half" for="star2half"></label>
<input type="radio" id="star2" name="rating" value="2" />
<label class="full" for="star2"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" />
<label class="half" for="star1half"></label>
<input type="radio" id="star1" name="rating" value="1" />
<label class="full" for="star1"></label>
<input type="radio" id="starhalf" name="rating" value="half" />
<label class="half" for="starhalf"></label>
</fieldset>
</div>
<div id="tooltip_block">
<div class="top_bar">4.2 stars out of 5 stars</div>
</div>
Your issue is with the fact that the input fields aren't the ones you're actually hovering on, it's the labels.
This should work (Note that I've also replaced fadeIn() / fadeOut() with show() / hide() as mouse movements queue up the fade animations and make it flicker if you move your mouse around the star).
$(document).ready(function(){
$("label").hover(showBox, hideBox);
function showBox(e) {
var x = e.pageX - 80;
var y = e.pageY + 20;
$('#tooltip_block .rating_value').html($('#' + $(this).attr('for')).val());
$('#tooltip_block').show();
$('#tooltip_block').offset({ left: x, top: y });
}
function hideBox(){
$('#tooltip_block').hide();
}
});
.rating_widgets {
display: flex;
justify-content: center;
margin-top: 25px;
}
.rating {
border: none;
float: left;
}
.rating > input { display: none; }
.rating > label:before {
font-size: 24px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
margin-left: 10px;
}
.rating > label {
color: #ddd;
float: right;
margin-left: 10px;
}
.rating > input:checked ~ label,
.rating:not(:checked),
.rating:not(:checked){ color: #FFD700; }
.rating > input:checked,
.rating > input:checked,
.rating > input:checked ~ label,
.rating > input:checked ~ label {
color: #FFED85;
}
#tooltip_block {
display: none;
position: absolute;
z-index: 1;
color: #ffffff;
background-color: #000;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating_widgets">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5"/>
<label class = "full" for="star5"></label>
<input type="radio" id="star4half" name="rating" value="4.5" />
<label class="half" for="star4half"></label>
<input type="radio" id="star4" name="rating" value="4" />
<label class = "full" for="star4"></label>
<input type="radio" id="star3half" name="rating" value="3.5" />
<label class="half" for="star3half"></label>
<input type="radio" id="star3" name="rating" value="3" />
<label class = "full" for="star3"></label>
<input type="radio" id="star2half" name="rating" value="2.5" />
<label class="half" for="star2half"></label>
<input type="radio" id="star2" name="rating" value="2" />
<label class = "full" for="star2"></label>
<input type="radio" id="star1half" name="rating" value="1.5" />
<label class="half" for="star1half"></label>
<input type="radio" id="star1" name="rating" value="1" />
<label class = "full" for="star1"></label>
<input type="radio" id="starhalf" name="rating" value="0.5" />
<label class="half" for="starhalf"></label>
</fieldset>
</div>
<div id="tooltip_block">
<div class="top_bar"><span class="rating_value"></span> stars out of 5 stars</div>
</div>
edit
This is the code that's inserting the values into the hover boxes
$('#tooltip_block .rating_value').html($('#' + $(this).attr('for')).val());
if you want to get rid of them remove that line of javascript (you should probably remove
<span class="rating_value"></span>
from the hover div as well then as it serves no purpose without that bit of js).
edit #2
As far as the hover showing up inbetween the stars - I updated your css. The thing is you were setting
.rating > label:before {
margin: 5px;
...
}
which effectively makes the elements that show your stars press up right besides one another. You can use
.rating > label {
...
margin-left: 10px;
}
.rating > .half:before {
...
margin-left: 10px;
}
Instead to create margins around the label elements

How to validate RadioButton options?

Hello everyone I'm creating a mcq type form where user can choose any answer and submit after submission it'll tell u that whether you've selected the correct answers or not. if you selected the correct answer then it'll prompt you okay the answer is correct and if you given the wrong answer it'll prompt u that this is the wrong answer along with the actual answer. I've already done this but my problem is when i'm choosing the correct value its prompting that correct answer after that if i choose the wrong option it'll give me that the answer is wrong but the previous "correct answer" line is not removing after the new prompt. How can i do this?
$(document).ready(function() {
$("#sid").click(function() {
if (!$("input[#name=q1]:checked").val()) {
alert("You're not done yet!");
} else {
var cat1name = "1";
var cat2name = "None";
var cat1 = ($("input[#name=q1]:checked").val() != "a");
var cat2 = (!cat1);
var categories = [];
if (cat1) {
categories.push(cat1name)
};
if (cat2) {
categories.push(cat2name)
};
var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';
$("#categorylist").text(catStr);
$("#categorylist").show("slow");
if (cat1) {
$("#category1").show("slow");
};
if (cat2) {
$("#category2").show("slow");
};
{
$("#closing").show("slow");
};
}
});
});
$(document).ready(function() {
$("#results1").click(function() {
if (!$("input[#name=q2]:checked").val()) {
alert("You're not done yet!");
} else {
var cat3name = "2";
var cat4name = "None";
var cat3 = ($("input[#name=q2]:checked").val() != "b");
var cat4 = (!cat3);
var categories = [];
if (cat3) {
categories.push(cat3name)
};
if (cat4) {
categories.push(cat4name)
};
var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';
$("#categorylist").text(catStr);
$("#categorylist").show("slow");
if (cat3) {
$("#category3").show("slow");
};
if (cat4) {
$("#category4").show("slow");
};
{
$("#closing").show("slow");
};
}
});
});
.answers li {
list-style: upper-alpha;
}
label {
margin-left: 0.5em;
cursor: pointer;
}
#results {
background: #dddada;
color: 000000;
padding: 3px;
text-align: center;
width: 200px;
cursor: pointer;
border: 1px solid gray;
}
#results:hover {
background: #3d91b8;
color: #ffffff;
padding: 3px;
text-align: center;
width: 200px;
cursor: pointer;
border: 1px solid gray;
}
#results1 {
background: #dddada;
color: 000000;
padding: 3px;
text-align: center;
width: 200px;
cursor: pointer;
border: 1px solid gray;
}
#results1:hover {
background: #3d91b8;
color: #ffffff;
padding: 3px;
text-align: center;
width: 200px;
cursor: pointer;
border: 1px solid gray;
}
#categorylist {
margin-top: 6px;
display: none;
}
#category1,
#category2,
#category3,
#category4,
#category5,
#category6,
#category7,
#category8,
#category9,
#category10,
#category11 {
display: none;
}
#closing {
display: none;
font-style: italic;
}
#sid {
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="testmcq.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="linkmcq.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
<p class="question">1. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
</ul>
<!--<div id="results">Show me the answers!</div>-->
<button type="button" class="btn btn-link" id="sid">Link Button</button>
<div id="category1">
<p><strong>Question 1:</strong> The correct answer is the <strong>Answer 1</strong>.</p>
</div>
<div id="category2">
<p>Correct Answer!</p>
</div>
&nbsp
<p class="question">2. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a">Answer 1</label><br/>
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">Answer 2</label><br/>
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">Answer 3</label><br/>
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">Answer 4</label><br/>
</ul>
<div id="results1">
Show me the answers!
</div>
<div id="category3">
<p><strong>Question 2:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
</div>
<!--<div id="category2">
<p><strong>Question 2:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
</div>-->
<div id="category4">
<p>Correct Answer!</p>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
I found many errors in your code.
If you need to check the radiobutton values you might use:
$("input:radio[name='q1']:checked").val();
I've made a possible solution using jQuery 1.11.0, so you could start with this.
Updated:
By default you need to hide the messages when you clic in the button.
$("#category1, #category2").hide();
$(function() {
$("#sid").on("click", function() {
$("#category1, #category2").hide();
var q1 = $("input:radio[name='q1']:checked");
if (q1.val() === undefined) {
alert("You're not done yet!");
} else {
var cat1name = "1";
var cat2name = "None";
var cat1 = (q1.val() != "a");
var cat2 = (!cat1);
var categories = [];
if (cat1) {
categories.push(cat1name)
}
if (cat2) {
categories.push(cat2name)
}
console.log(categories);
var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';
$("#categorylist").text(catStr);
$("#categorylist").show("slow");
if (cat1) {
$("#category1").show("slow");
}
if (cat2) {
$("#category2").show("slow");
}
$("#closing").show("slow");
}
});
$("#results1").on("click", function() {
$("#category3, #category4").hide();
var q2 = $("input:radio[name='q2']:checked");
if (q2.val() === undefined) {
alert("You're not done yet!");
} else {
var cat3name = "2";
var cat4name = "None";
var cat3 = (q2.val() != "b");
var cat4 = (!cat3);
var categories = [];
if (cat3) {
categories.push(cat3name)
};
if (cat4) {
categories.push(cat4name)
};
var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';
$("#categorylist").text(catStr);
$("#categorylist").show("slow");
if (cat3) {
$("#category3").show("slow");
}
if (cat4) {
$("#category4").show("slow");
}
$("#closing").show("slow");
}
});
});
.answers li {
list-style: upper-alpha;
}
label {
cursor: pointer;
margin-left: 0.5em;
}
#results {
background: #dddada;
border: 1px solid gray;
color: #000000;
cursor: pointer;
padding: 3px;
text-align: center;
width: 200px;
}
#results:hover {
background: #3d91b8;
border: 1px solid gray;
color: #ffffff;
cursor: pointer;
padding: 3px;
text-align: center;
width: 200px;
}
#results1 {
background: #dddada;
border: 1px solid gray;
color: #000000;
cursor: pointer;
padding: 3px;
text-align: center;
width: 200px;
}
#results1:hover {
background: #3d91b8;
border: 1px solid gray;
color: #ffffff;
cursor: pointer;
padding: 3px;
text-align: center;
width: 200px;
}
#categorylist {
display: none;
margin-top: 6px;
}
#category1,
#category2,
#category3,
#category4,
#category5,
#category6,
#category7,
#category8,
#category9,
#category10,
#category11 {
display: none;
}
#closing {
display: none;
font-style: italic;
}
#sid {
font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p class="question">1. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a">
<label for="q1a">Answer 1</label>
<br/>
<input type="radio" name="q1" value="b" id="q1b">
<label for="q1b">Answer 2</label>
<br/>
<input type="radio" name="q1" value="c" id="q1c">
<label for="q1c">Answer 3</label>
<br/>
<input type="radio" name="q1" value="d" id="q1d">
<label for="q1d">Answer 4</label>
<br/>
</ul>
<!--<div id="results">Show me the answers!</div>-->
<button type="button" class="btn btn-link" id="sid">Link Button</button>
<div id="category1">
<p><strong>Question 1:</strong> The correct answer is the <strong>Answer 1</strong>.</p>
</div>
<div id="category2">
<p>Correct Answer!</p>
</div>&nbsp
<p class="question">2. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q2" value="a" id="q2a">
<label for="q2a">Answer 1</label>
<br/>
<input type="radio" name="q2" value="b" id="q2b">
<label for="q2b">Answer 2</label>
<br/>
<input type="radio" name="q2" value="c" id="q2c">
<label for="q2c">Answer 3</label>
<br/>
<input type="radio" name="q2" value="d" id="q2d">
<label for="q2d">Answer 4</label>
<br/>
</ul>
<div id="results1">Show me the answers!</div>
<div id="category3">
<p><strong>Question 2:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
</div>
<!--<div id="category2">
<p><strong>Question 2:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
</div>-->
<div id="category4">
<p>Correct Answer!</p>
</div>
Demo

validate only last radio button of a group of radio

i have a form with questions, and need validate these questions, answered with radio buttons, this form have 20 or more questions, the questions have options 1,2,3. 1 = good, 2 = problem, 3 = critic. the user can check only 5 times the option 3. how i can do it with javascript?
i use only normal validate to unchecked options.
here a preview of radios:
JSFiddle
<div class="inline">
<label for="option1">
<input type="radio" name="group[1]" value="1">1</label>
<label for="option1">
<input type="radio" name="group[1]" value="1">2</label>
<label for="option1">
<input type="radio" name="group[1]" value="1">3</label>
</div>
CSS
.inline {
display: inline;
}
.inline label, input[type="radio"] {
float: left;
}
.inline label {
display: block;
background: #eee;
margin-left: 5px;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
color: #333;
font-family: arial, sans-serif;
}
.inline input[type="radio"] {
display: block;
}
I guess value="1" in every radio was a typo and you meant
<label for="option1">
<input type="radio" id="option1" name="group[1]" value="1">1</label>
<label for="option2">
<input type="radio" id="option2" name="group[1]" value="2">2</label>
<label for="option3">
<input type="radio" id="option3" name="group[1]" value="3">3</label>
Then you can find how many checked radios with value="3" are there using
jQuery('input[value="3"]:checked').length
and act accordingly if the length is greater than 5.
Edit: jsfiddle demo (with the limit set to 2, not 5).

Categories