We Keep Coding

Javascript for PDF form validation

The code is working fine. I want to add an option of selecting at least one check box out of 7. I am not sure how to do.
var emptyFields = [];
for (var i = 0; i < this.numFields; i++) {
var f = this.getField(this.getNthFieldName(i));
if (f.type != "button" && f.required) {
if ((f.type == "text" && f.value == "") || (f.type == "checkbox" && f.value == "Off") || (f.type == "signature" && f.value == "")) emptyFields.push(f.name);
}
}
if (emptyFields.length > 0) {
app.alert("Error! Please fill all red highlighted fields")
} else {
print();
}

You just need to change a bit the logic you have there:
Create a new array checkedCheckboxes.
Store there the elements where f.type === "checkbox" && f.checked === true.
Lastly, check if checkedCheckboxes.length === 0 and show the appropiate error message, just how you did with emptyFields.
Edit: Working example:
// Get a reference to the error box:
const errorBox = document.getElementById('errorBox');
// To the validate button:
const validateButton = document.getElementById('validateButton');
// And to all input elements:
const inputs = document.querySelectorAll('input');
function validateForm() {
// Reset the error box:
errorBox.innerHTML = '';
// Here we'll keep track of empty text inputs:
const emptyFields = [];
// And here we'll keep track of how many selected checkboxes each
// group has:
const checkedCheckboxesByGroup = {
checkboxes: 0,
checkboxes2: 0,
};
Array.from(inputs).map((input) => {
if (input.type === "text" && input.value === "") {
// Keep track of empty inputs:
emptyFields.push(input);
}
if (input.type === "checkbox" && input.checked) {
// Get the checkbox group (name attribute without the
// square brackets):
const groupName = input.name.slice(0, -2);
// Increment this counter:
++checkedCheckboxesByGroup[groupName];
}
});
if (emptyFields.length > 0) {
errorBox.innerHTML += "<p>All fields are required.</p>";
}
Object.entries(checkedCheckboxesByGroup).map(([groupName, checkedCheckboxes]) => {
if (checkedCheckboxes === 0)
errorBox.innerHTML += `<p>You need to select at least one element in ${ groupName }.</p>`;
});
}
// Validate the form every time we click the button:
validateButton.addEventListener('click', validateForm);
body,
input,
button {
font-family: monospace;
}
p {
margin: 0;
}
.label {
display: block;
border: 0;
margin: 0 0 16px;
padding: 0;
}
.labelTitle {
display: block;
margin-bottom: 4px;
}
input[type="text"],
button {
border: 2px solid black;
padding: 8px;
border-radius: 2px;
background: white;
}
.checkboxLabel {
display: block;
position: relative;
padding: 8px 8px 8px 32px;
}
input[type="checkbox"] {
position: absolute;
top: 50%;
left: 16px;
transform: translate(-50%, -50%);
margin: 0;
}
#errorBox {
border: 2px solid red;
padding: 8px;
border-radius: 2px;
margin-bottom: 16px;
}
#errorBox > p + p {
margin-top: 16px;
}
#errorBox:empty {
display: none;
}
<label class="label">
<span class="labelTitle">Field 1</span>
<input type="text" placeholder="Field 1" />
</label>
<label class="label">
<span class="labelTitle">Field 1</span>
<input type="text" placeholder="Field 1" />
</label>
<label class="label">
<span class="labelTitle">Field 1</span>
<input type="text" placeholder="Field 1" />
</label>
<fieldset class="label">
<span class="labelTitle">Checkboxes Group 1</span>
<label class="checkboxLabel"><input type="checkbox" value="1" name="checkboxes[]" />Checkbox 1</label>
<label class="checkboxLabel"><input type="checkbox" value="2" name="checkboxes[]" />Checkbox 2</label>
<label class="checkboxLabel"><input type="checkbox" value="3" name="checkboxes[]" />Checkbox 3</label>
<label class="checkboxLabel"><input type="checkbox" value="4" name="checkboxes[]" />Checkbox 4</label>
<label class="checkboxLabel"><input type="checkbox" value="5" name="checkboxes[]" />Checkbox 5</label>
<label class="checkboxLabel"><input type="checkbox" value="6" name="checkboxes[]" />Checkbox 6</label>
<label class="checkboxLabel"><input type="checkbox" value="7" name="checkboxes[]" />Checkbox 7</label>
</fieldset>
<fieldset class="label">
<span class="labelTitle">Checkboxes Group 2</span>
<label class="checkboxLabel"><input type="checkbox" value="10" name="checkboxes2[]" />Checkbox 10</label>
<label class="checkboxLabel"><input type="checkbox" value="20" name="checkboxes2[]" />Checkbox 20</label>
<label class="checkboxLabel"><input type="checkbox" value="30" name="checkboxes2[]" />Checkbox 30</label>
<label class="checkboxLabel"><input type="checkbox" value="40" name="checkboxes2[]" />Checkbox 40</label>
<label class="checkboxLabel"><input type="checkbox" value="50" name="checkboxes2[]" />Checkbox 50</label>
<label class="checkboxLabel"><input type="checkbox" value="60" name="checkboxes2[]" />Checkbox 60</label>
<label class="checkboxLabel"><input type="checkbox" value="70" name="checkboxes2[]" />Checkbox 70</label>
</fieldset>
<div id="errorBox"></div>
<button id="validateButton">Validate Form</button>

Putting some 2 second breaks between questions in already made jquery code

I have a jquery code which is useful for changing one question for another. Questions them self are stored in div's. However, I am trying to work out a solution of how to make some small time brakes between these questions.
The only solution that I have at the moment is to hide/show each div with a question at specific time, but that's really bad code-wise, and I would like to have something that looks pretty and which could be easily changed (time-wise).
jQuery(function() {
var $els = $('div[id^=question]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function() {
$els.eq(i).fadeOut(function() {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 15000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="question1"></div>
<div id="question2" class="question">
<input type="radio" name="q1" value="non" id="non" style="visibility: hidden" checked><br>
<label> <input type="radio" name="q1" value="1" id="guess" class="radio" >Rain</label>
<label> <input type="radio" name="q1" value="2" id="guess" class="radio" >No rain</label><br>
</div> <br>
<div id="question3" class="question">
<input type="radio" name="q2" value="non" id="non" style="visibility: hidden" checked><br>
<label> <input type="radio" name="q2" value="1" id="guess" class="radio" >Rain</label>
<label> <input type="radio" name="q2" value="2" id="guess" class="radio" >No rain</label><br>
</div> <br>

Take a look at my approach. I solved most of it with plain old CSS.
const getNextQuestion = (current) => {
let next = current.nextElementSibling;
if (next.tagName !== 'DIV') {
return;
}
return next;
}
let currentQuestion = document.querySelector('.is-open');
document.querySelector('button').addEventListener('click', () => {
let currentQuestion = document.querySelector('.is-open');
let nextQuestion = getNextQuestion(currentQuestion);
currentQuestion.classList.remove('is-open');
nextQuestion.classList.add('is-open');
currentQuestion = nextQuestion;
});
.question {
border: 1px solid red;
background: tomato;
margin-bottom: 25px;
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: 'Open Sans';
opacity: 0;
visibility: none;
transition: visibility 1s linear, opacity 1s linear;
}
.is-open {
opacity: 1;
visibility: visible;
}
<div>
<div class="question is-open">
Question 1
</div>
<div class="question">
Questi
<div>
<div class="question is-open">
Question 1
</div>
<div cla<div>
<div class="question is-open">
Question 1
</div>
<div class="question">
Question 2
</div>
</div>
<button>
Next Question
</button> ss="question"> Question 2
</div>
</div>
<button>
Next Question
</button> on 2
</div>
</div>
<button>
Next Question
</button>

How to make simple star rating?

I make my own star rating with html css, but it is not working true. If i use direction: rtl or float: right it works but i can't use rtl or float:right because of php.
How can i make it with pure css and html?
$('.stars a').on('click', function(){
$('.stars a').removeClass('active');
$(this).addClass('active');
});
.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
font-size: 0;
text-decoration: none;
}
.stars a:before {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "\f005";
color: #9e9e9e;
}
.stars a:hover:before,
.stars a:hover ~ a:before,
.stars a.active:before,
.stars a.active ~ a:before {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>

Starting to your HTML, I tried to reverse the color's change 'cause in pure CSS + & ~ works only on next elements. Then why you don't make the next a gray and not blue?
I tried to play only with your CSS, but I had to add also a class to span to work with active situation. Sorry :P
This is the result:
$('.stars a').on('click', function(){
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
});
.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
padding-right:4px;
text-decoration: none;
margin:0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "\f005";
color: #9e9e9e;
}
span {
font-size: 0; /* trick to remove inline-element's margin */
}
.stars a:hover ~ a:after{
color: #9e9e9e !important;
}
span.active a.active ~ a:after{
color: #9e9e9e;
}
span:hover a:after{
color:blue !important;
}
span.active a:after,
.stars a.active:after{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>
Hope it helps! :)

This uses radio buttons to achieve the effect
<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
https://codepen.io/jamesbarnett/pen/vlpkh

Simple star rating with pure javascript.
HTML
<div id="rating_bar"> </div>
CSS
#rating_bar {
width:100px;
height:100px;
display:inline-block;
display:inline;
}
Javascript
var content ='';
for(var i=1;i<=5;i++)
content += ' <span id="rate_'+i+'">✰</span> ';
document.getElementById('rating_bar').innerHTML=content;
var spans = document.getElementById("rating_bar")
.getElementsByTagName('span');
for(i=0;i<spans.length;i++)
spans[i].onmouseover=hoverStar;
function hoverStar()
{
for(i=0;i<this.id.charAt(5);i++)
spans[i].innerText='⭐';
for(i=this.id.charAt(5);i<5;i++)
spans[i].innerText='✰';
}
Sample Output:

HTML
<div class="rating" tabindex="1" onblur="calculateRating(this)">
<i class="fa fa-star-o" aria-hidden="true" value="1" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="2" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="3" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="4" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="5" onclick="clickStar(this)"></i>
</div>
<div class="rating-display"></div>
CSS
.clicked{
color:yellow;}
JAVASCRIPT
var rating = document.querySelector(".rating");
var ratingDisplayEle = document.querySelector(".rating-display");
//add event listener
function clickStar(ele){
var clickedStar = ele;
//value of the star
var ratingValue = parseInt(clickedStar.getAttribute("value"));
//change the color of the star
for(var i=0; i<ratingValue; i++){
rating.children[i].classList.add("clicked");
for(var j=ratingValue; j<=4; j++){
if(rating.children[j].classList.contains("clicked")){
rating.children[j].classList.remove("clicked");
}
}
}
}
//function to calculate rating
function calculateRating(ele){
//check how many elements are having clicked class
var ratingCount = 0;
for(var i=0; i<ele.children.length; i++){
if(ele.children[i].classList.contains("clicked")){
ratingCount++;
}
}
ratingDisplayEle.textContent = `You have selected ${ratingCount} rating out of 5`;
}

Simple star rating
function myFunction() {
var five = document.getElementById('1-star').checked;
document.getElementById("one").innerHTML = five;
}
/* component */
.star-rating {
display:flex;
flex-direction: row-reverse;
font-size:3em;
justify-content:space-around;
padding:0 .2em;
text-align:center;
width:5em;
}
.star-rating input {
display:none;
}
.star-rating label {
color:#ccc;
cursor:pointer;
}
.star-rating :checked ~ label {
color:#f90;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
color:#fc0;
}
<div class="star-rating">
<input type="radio" id="5-stars" name="rating" value="5" />
<label for="5-stars" class="star">★</label>
<input type="radio" id="4-stars" name="rating" value="4" />
<label for="4-stars" class="star">★</label>
<input type="radio" id="3-stars" name="rating" value="3" />
<label for="3-stars" class="star">★</label>
<input type="radio" id="2-stars" name="rating" value="2" />
<label for="2-stars" class="star">★</label>
<input type="radio" id="1-star" name="rating" value="1" />
<label for="1-star" class="star">★</label>
</div>
<p id="one" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>

How to show 1 answer at a time in a quiz

Right now after you click for example answer A and click submit, There appears some explanation after Answer A. And when you click answer B, explanation B pops up. But explanation A still remains. How to fix this ?
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
function myFunction() {
var checked = document.querySelector("input[name = 'variable']:checked");
var value = checked.parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
}
checked.parentNode.lastChild.innerHTML = answer;
}
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
border-width: 5px;
border-color: #00A7AE;
margin-top: 7%;
text-align: center;
position: relative;
background: #73B7DB;
}
.row {
text-align: left;
color: white;
margin-left: 10%;
}
span#demo, #demo2, #demo3 {
display: inline;
color: green;
margin-right: 30%;
float:right;
width:50%;
}
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="row"> <h3>Moths are a member of what order?</h3></div>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon <span id="demo"></span></div>
<div> </div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy <span id="demo2"></span></div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera <span id="demo3"></span></div>
<div class="row"> <h3>Question 2</h3></div>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1 </div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
<div class="row"><h3>Question 3</h3></div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1</div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2</div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3</div>
<p> <input type="submit" onclick="myFunction()" value="Submit" /> </p>
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close quizbox div -->
<span>fdf</span> <span>fdf</span><span>fdf</span>
fd
hgf
<div> </div>

Start button doesn't show questions when startover button is clicked

I am working on a quiz. My start button is supposed to show the first question/answers when clicked and it does (the first time I use it).
In fact, when I click on my startover button at the end of the quiz (once results are shown), it brings me back to the first "page" with the start button (to start the quiz again) but when I click the start button, thought the progress bar does show, the question doesn't!
So basically, my start button works to start the quiz but if you want to start over the quiz again you can't because in this case it only shows the progress bar and nothing else.
This is my code:
$(document).ready(function(){ // DOC READY
var totalQuestions = $('.questionarea').length; // VARIABLES
var currentQuestion = 0;
var $progressbar = $("#progressbar");
var score = 0;
var value = 0;
$questions = $('.questionarea');
$questions.hide();
$("#startover").on("click", function(){ // STARTOVER
$(this).hide();
$(".answers").hide();
$("#images").hide();
$("#score").hide();
$(".btn-lg").show();
score = 0;
value = 0;
currentQuestion = 0;
$progressbar.val(value);
$questions.hide();
});
$(document).on("click", ".btn-lg", function(){ // START BUTTON FADE OUT
$(this).hide();
$progressbar.show(200);
$(".answers").show(200);
$($questions.get(currentQuestion)).fadeIn();
});
$(document).on("click", '.answers input', function(){ // NEW QUESTIONS FADE IN + PROGRESS BAR
$($questions.get(currentQuestion)).fadeOut(200, function () {
currentQuestion ++;
if (currentQuestion === totalQuestions){
$("#results").fadeIn(200);
}
else {
$questions.eq(currentQuestion).fadeIn(200);
}
value = value + 10;
$progressbar.val(value);
});
});
function calcScore() { // OPTIONS CHECKED
var house1 = document.getElementById('option1').checked;
var house2 = document.getElementById('option8').checked;
var house3 = document.getElementById('option11').checked;
var house4 = document.getElementById('option16').checked;
var house5 = document.getElementById('option18').checked;
var house6 = document.getElementById('option23').checked;
var house7 = document.getElementById('option27').checked;
var house8 = document.getElementById('option32').checked;
var house9 = document.getElementById('option35').checked;
var house10 = document.getElementById('option36').checked;
var sher1 = document.getElementById('option2').checked;
var sher2 = document.getElementById('option6').checked;
var sher3 = document.getElementById('option10').checked;
var sher4 = document.getElementById('option14').checked;
var sher5 = document.getElementById('option19').checked;
var sher6 = document.getElementById('option24').checked;
var sher7 = document.getElementById('option26').checked;
var sher8 = document.getElementById('option29').checked;
var sher9 = document.getElementById('option33').checked;
var sher10 = document.getElementById('option37').checked;
var cas1 = document.getElementById('option3').checked;
var cas2 = document.getElementById('option7').checked;
var cas3 = document.getElementById('option9').checked;
var cas4 = document.getElementById('option15').checked;
var cas5 = document.getElementById('option17').checked;
var cas6 = document.getElementById('option21').checked;
var cas7 = document.getElementById('option28').checked;
var cas8 = document.getElementById('option30').checked;
var cas9 = document.getElementById('option33').checked;
var cas10 = document.getElementById('option38').checked;
var brbad1 = document.getElementById('option4').checked;
var brbad2 = document.getElementById('option5').checked;
var brbad3 = document.getElementById('option12').checked;
var brbad4 = document.getElementById('option13').checked;
var brbad5 = document.getElementById('option20').checked;
var brbad6 = document.getElementById('option22').checked;
var brbad7 = document.getElementById('option25').checked;
var brbad8 = document.getElementById('option31').checked;
var brbad9 = document.getElementById('option34').checked;
var brbad10 = document.getElementById('option39').checked;
if(house1 === true){ // SCORE CALCULATION
score += 1;
}
if(house2 === true){
score += 1;
}
if(house3 === true){
score += 1;
}
if(house4 === true){
score += 1;
}
if(house5 === true){
score += 1;
}
if(house6 === true){
score += 1;
}
if(house7 === true){
score += 1;
}
if(house8 === true){
score += 1;
}
if(house9 === true){
score += 1;
}
if(house10 === true){
score += 1;
}
if(sher1 === true){
score += 2;
}
if(sher2 === true){
score += 2;
}
if(sher3 === true){
score += 2;
}
if(sher4 === true){
score += 2;
}
if(sher5 === true){
score += 2;
}
if(sher6 === true){
score += 2;
}
if(sher7 === true){
score += 2;
}
if(sher8 === true){
score += 2;
}
if(sher9 === true){
score += 2;
}
if(sher10 === true){
score += 2;
}
if(cas1 === true){
score += 3;
}
if(cas2 === true){
score += 3;
}
if(cas3 === true){
score += 3;
}
if(cas4 === true){
score += 3;
}
if(cas5 === true){
score += 3;
}
if(cas6 === true){
score += 3;
}
if(cas7 === true){
score += 3;
}
if(cas8 === true){
score += 3;
}
if(cas9 === true){
score += 3;
}
if(cas10 === true){
score += 3;
}
if(brbad1 === true){
score += 4;
}
if(brbad2 === true){
score += 4;
}
if(brbad3 === true){
score += 4;
}
if(brbad4 === true){
score += 4;
}
if(brbad5 === true){
score += 4;
}
if(brbad6 === true){
score += 4;
}
if(brbad7 === true){
score += 4;
}
if(brbad8 === true){
score += 4;
}
if(brbad9 === true){
score += 4;
}
if(brbad10 === true){
score += 4;
}
// CHARACTER SCORE
if(score < 12){
score = "House & Wilson!";
$("#houseimage").show();
}
if(score <= 20){
score = "Sherlock & John!";
$("#sherimage").show();
}
if(score <= 30){
score = "Dean & Cas!";
$("#casimage").show();
}
if(score <= 40){
score = "Walt & Jesse!";
$("#brbadimage").show();
}
}
// SHOW RESULTS
$("#results").click(function(){
$(this).hide();
$progressbar.hide();
$("#startover").show();
calcScore();
$("#score").show();
document.getElementById("score").innerText = 'You Got: ' + score;
});
});
body {
background-image: url("http://wallpoper.com/images/00/40/76/15/gregory-house_00407615.jpg");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
background-position: fixed;
}
.header {
margin-top: 30px;
}
#title {
font-size: 30px;
text-align: center;
font-family: fantasy, serif;
margin-top: 50px;
margin: 0 auto;
float: none;
}
.box {
width: 900px;
height: 450px;
background-color: #ba348b;
border-radius: 40px;
box-shadow: 4px 4px 10px 4px black;
padding: auto;
overflow: hidden;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 30px;
float: none;
}
// START QUIZ BUTTON
#start {
background-color: #00c6d2;
border: 2px solid #13281c;
border-radius: 10px;
color: #13281c;
padding: 20px;
width: 200px;
opacity: 1;
margin-top: 110px;
font-size: 20px;
font-family: fantasy, serif;
&:hover {
background-color:
#009ea8;
}
}
.btn-lg {
float: none;
margin: 0 auto;
text-align:center;
margin-top: 70px;
margin-left: 10px;
}
// PROGRESS BAR
.divprogress {
text-align: center;
float: none;
margin: 0 auto;
}
#progressbar {
background-color: blue;
margin: 0 auto;
float: none;
box-shadow: none;
outline: none;
text-align: center;
width: 780px;
margin-left: auto;
margin-right:auto;
margin-top: 20px;
display: none;
}
// QUESTIONS AND ANSWERS
#QA1, #QA2, #QA3, #QA4, #QA5, #QA6, #QA7, #QA8, #QA9, #QA10 {
margin-top: 10px;
font-family: fantasy, serif;
color: #13281c;
display: none;
}
.questionarea {
display: none;
}
.col-lg-6 {
float: none;
margin: 0 auto;
margin-top: -40px;
}
.question1, .question2, .question3, .question4, .question5, .question6, .question7, .question8, .question9, .question10 {
font-size: 18px;
font-family: fantasy, serif;
margin-top: 70px;
margin-bottom: 30px;
}
.btn-primary {
font-size: 14px;
background-color: #ffff32 !important;
color: #13281c !important;
outline: 0 none;
opacity: 1;
border: 0 none;
&:hover{
background-color: #e5e500 !important;
color: black !important;
outline: 0 none;
}
}
// RESULTS BUTTON / TEXT
#results {
padding: 20px;
background-color: #609D57;
border: 3px solid darkgreen;
border-radius: 10px;
display: none;
text-align: center;
font-family: fantasy, serif;
float: center;
margin-top: 90px;
font-size: 18px;
color: #13281c !important;
outline: 0 none;
opacity: 1;
&:hover{
background-color: #568d4e !important;
color: black !important;
outline: 0 none;
}
}
#score {
text-align: center;
font-size: 20px;
font-family: fantasy, serif;
float: center;
color: #920602;
}
#startover{
text-align: center;
font-size: 14px;
font-family: fantasy, serif;
margin-top: 20px;
float: center;
display: none;
background-color: rgba(211,211,211, 0.7);
&:hover {
background-color: rgba(211,211,211, 1);
}
}
// IMAGES
#houseimage, #sherimage, #casimage, #brbadimage {
display: none;
text-align: center;
margin-top: 10px;
}
#houseimage, #sherimage, #brbadimage {
height: 240px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container box">
<div class="header">
<div class="text-center" id="title"> WHICH TV BROMANCE ARE YOU AND YOUR BFF? </div></div>
<div class="col-sm-11 text-center divprogress">
<div class="text-center">
<progress class="progress progress-striped progress-animated center-block" style="width: 0%, text-align: center" id="progressbar" value="0" max="100"></progress> </div></div>
<br>
<br>
<div class="col-lg-6 text-center">
<button type="button" class="btn btn-secondary btn-lg text-center" id="start">START QUIZ</button></div>
<!-- QUIZ AREA -->
<!-- QUESTION & ANSWERS 1 -->
<div id="content">
<div class="questionarea text-center" id="QA1" data-question"1">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question1">Q1: How did you and your BFF meet?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question1" value="1" id="option1"> At work </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question1" value="2" id="option2"> Living together</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question1" value="3" id="option3"> Under unusual or other circumstances</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question1" value="4" id="option4"> In school</label></div></div>
</div>
<!-- QUESTION & ANSWERS 2 -->
<div class="questionarea text-center" id="QA2" data-question"2">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question2">Q2: How long have you known each other?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question2" value="4" id="option5"> Less than 3 years </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question2" value="2" id="option6"> 4-7 years</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question1" value="3" id="option7"> At least 8 years</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question2" value="1" id="option8"> Over 20 years</label></div></div>
</div>
<!-- QUESTION & ANSWERS 3 -->
<div class="questionarea text-center" id="QA3" data-question"3">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question3">Q3: How would you describe your friendship?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question3" value="3" id="option9"> Deep </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question3" value="2" id="option10"> Amazing</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question1" value="1" id="option11"> Needy</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question3" value="4" id="option12"> Protective</label></div></div>
</div>
<!-- QUESTION & ANSWERS 4 -->
<div class="questionarea text-center" id="QA4" data-question"3">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question4">Q4: What do you do together?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question4" value="4" id="option13"> Business </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question4" value="2" id="option14"> Go out</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question4" value="3" id="option15"> Just hold each other</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question4" value="1" id="option16"> Play pranks on each other</label></div></div>
</div>
<!-- QUESTION & ANSWERS 5 -->
<div class="questionarea text-center" id="QA5" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question5">Q5: How often do you fight?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question5" value="3" id="option17"> Not much, but when we do, it's a big deal </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question5" value="1" id="option18"> We have lots of harmless tiffs</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question5" value="2" id="option19"> Sometimes</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question5" value="4" id="option20"> Often and it can get physical</label></div></div>
</div>
<!-- QUESTION & ANSWERS 6 -->
<div class="questionarea text-center" id="QA6" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question6">Q6: How well do you know each other?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question6" value="3" id="option21"> Quite a lot </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question6" value="4" id="option22"> Not much</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question6" value="1" id="option23"> We know every detail of each other's lives</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question6" value="2" id="option24"> He knows way more about my life than I know about his (or viceversa)</label></div></div>
</div>
<!-- QUESTION & ANSWERS 7 -->
<div class="questionarea text-center" id="QA7" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question7">Q7: Do you celebrate your birthdays together?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question7" value="4" id="option25"> No, but I buy him a great present </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question7" value="2" id="option26"> Of course</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question7" value="1" id="option27"> Often</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question7" value="3" id="option28"> Only if he's in town at the time</label></div></div>
</div>
<!-- QUESTION & ANSWERS 8 -->
<div class="questionarea text-center" id="QA8" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question8">Q8: How often are you around each other's houses?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question8" value="2" id="option29"> We live together </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question8" value="3" id="option30"> Often</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question8" value="4" id="option31"> Not often</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question8" value="1" id="option32"> All the time</label></div></div>
</div>
<!-- QUESTION & ANSWERS 9 -->
<div class="questionarea text-center" id="QA9" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question9">Q9: How often do you talk about your feelings?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question9" value="3" id="option33"> No need. We can see right through each other </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question9" value="2" id="option33"> Occasionally</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question9" value="4" id="option34"> Rarely</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question9" value="1" id="option35"> Only in a joking manner</label></div></div>
</div>
<!-- QUESTION & ANSWERS 10 -->
<div class="questionarea text-center" id="QA10" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question10">Q10: What do you consider each other as?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question10" value="1" id="option36"> Life partners </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question10" value="2" id="option37"> Best friends</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question10" value="3" id="option38"> Family (brothers)</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question10" value="4" id="option39"> Family (father/son)</label></div></div>
</div>
<!-- ---- -->
<button id="results">View Results</button>
<h2 id='score'></h2>
<div id="images">
<img id="houseimage" src="http://24.media.tumblr.com/tumblr_m70pdclcae1qcy01ao1_500.gif" />
<img id="brbadimage" src="http://24.media.tumblr.com/c88e253d9ed37f2cf422bf4bef27bcbc/tumblr_n52r45b3YW1qglx18o1_r1_250.gif" />
<img id="sherimage" src="http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=http://mmbiz.qpic.cn/mmbiz/4vhrz0icYkiaUHCPsiaJUKMEsFnUWwluggISyy0iaAaZvhOxcKhdc3XLK8LhSc3q52lOaIvBzsuZP93STzKEyqoYBw/0?wx_fmt=gif" />
<img id="casimage" src="http://66.media.tumblr.com/9c0723fa2ff4054cea2d0a530802fef8/tumblr_inline_mtnsncH2fn1qjt6x6.gif" />
</div>
<div><button id="startover">Start Over</button></div>
</div>
</div>
</body>

$("#startover").on("click", function(){ // STARTOVER
$(this).hide();
$('#option1').removeAttr('checked');
$('#option2').removeAttr('checked');
/// and so on for rest of options use an array/loop to be more elegant
//$("#images").hide(); dont want to hide slideshow
$("#score").hide();
$(".btn-lg").show();
score = 0;
value = 0;
currentQuestion = 0;
$progressbar.val(value);
$questions.hide();
});