We Keep Coding

if I select No in radio button, it just showing Blank

There are 4 Yes,No radio buttons and if I choose Yes, it shows the value 'YES'. But, if I chooseNo, it just showing blank. May I know how can I fix it?
<div id='testtwo' style="display:block;">
<label class="control-label col-sm-4" for="pnl">Is the packing properly vacuum sealed? :</label>
<div class="col-sm-4" style="margin-top:19px;">
<p class="form-control-static" style="margin-top: -7px;display: inline-flex;color: darkslategrey;">
<input type="radio" name="pkyes" value="YES">
<label for="pkyes" style="margin-left: 6px; margin-top: 8px;">YES</label><br>
<input type="radio" name="pkyes" value="NO" style="margin-left: 16px;">
<label for="pkno" style="margin-left: 6px; margin-top: 8px;">NO</label><br>
</p>
</div></div>
Below is JavaScript.
var testasd=document.querySelector('input[type=radio][name=pkyes]');
if(testasd.checked == false ){
var pk = '';
}else {
var pk = testasd.value;
}

I believe you have to check for checked. Add :checked in querySelector. Adding solution there:
const testasd = document.querySelector('input[type=radio][name=pkyes]:checked');
const pk = testasd ? testasd.value : '';
console.log(pk)
<div id='testtwo' style="display:block;">
<label class="control-label col-sm-4" for="pnl">Is the packing properly vacuum sealed? :</label>
<div class="col-sm-4" style="margin-top:19px;">
<p class="form-control-static" style="margin-top: -7px;display: inline-flex;color: darkslategrey;">
<input type="radio" name="pkyes" value="YES">
<label for="pkyes" style="margin-left: 6px; margin-top: 8px;">YES</label><br>
<input type="radio" name="pkyes" value="NO" style="margin-left: 16px;" checked>
<label for="pkno" style="margin-left: 6px; margin-top: 8px;">NO</label><br>
</p>
</div></div>

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 show hide single area in multiple div

we have one problem in code, in my code function there is main div area and inside this we have two radio button when we change or select radio there is two section one is for textarea and one for file up load button, when we click they show and hide.
please find the link of my code:- https://jsfiddle.net/bharat_negi/bw6uw9ah/
jquery code :-
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$('.textArea').show();
$('.browseArea').hide();
}
else if (this.value == 'Text') {
$('.textArea').hide();
$('.browseArea').show();
}
});
}

Try this.You need target the element of textarea from the closest parent otherwise its target all the texarea element.That why its hiding all the textarea and choose buttons.And also change the matching if with Text else with Image
changeCheck();
function changeCheck() {
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
} else if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}
.questionBlock {
float: left;
margin: 0;
padding: 10px 0;
width: 100%;
display: flex;
}
.questionBlock .alloption {
float: left;
margin: 0;
padding: 0;
width: 100%;
clear: both;
}
.questionBlock .text {
display: inline-block;
margin: 0;
padding: 0;
width: 10%;
}
.questionBlock .radioArea {
display: inline-block;
margin: 0;
padding: 0;
width: 20%;
}
.questionBlock .textArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
}
.questionBlock .browseArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>

You can find working jsfiddle here without so much changes to your code
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio]', function() {
if (this.value == 'Image') {
console.log($(this).parent())
$(this).parents('.questionBlock').find('.textArea').hide();
$(this).parents('.questionBlock').find('.browseArea').show();
}
else if (this.value == 'Text') {
$(this).parents('.questionBlock').find('.textArea').show();
$(this).parents('.questionBlock').find('.browseArea').hide();
}
});
}
Multiple checkbox toggle with image and textarea

Here is updated jquery function:
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
}
else if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}
I have used $(this).closest('.questionBlock') to get the relevant textarea and fileupload elements.

Here $(this).parent().closest('div') will get the 'radioArea' div then you call the .next() it will retrieve next div after the 'radioArea' which is 'textArea' div so in this way you can perform show or hide functionality corresponding to the item that you clicked.
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
}
else if (this.value == 'Text') {
$(this).parent().closest('div').next().next().hide(); //hide browseArea div
$(this).parent().closest('div').next().show(); //show textArea div
}
});
}
.questionBlock{ float: left; margin: 0; padding: 10px 0; width: 100%; display: flex;}
.questionBlock .alloption{float: left; margin: 0; padding: 0; width: 100%; clear: both;}
.questionBlock .text{ display: inline-block; margin: 0; padding: 0; width: 10%;}
.questionBlock .radioArea{ display: inline-block; margin: 0; padding: 0; width: 20%;}
.questionBlock .textArea{ display: inline-block; margin: 0; padding: 0; width: 70%;}
.questionBlock .browseArea{ display: inline-block; margin: 0; padding: 0; width: 70%; display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>

text is beneath other text instead of next to it, though I haven't used any weird code

I made a quiz and the plan is when you click submit there is going to be some text next to the answers with some more information. But now, when I click on submit the information is displayed beneath the answers instead of next to it.
You can see the problem in question 2 answer 1 after submitting.
demo: https://plnkr.co/edit/OvcwBzfFte4A0F0NbNSi?p=preview
What can be the problem ?
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
margin-top: 7%;
text-align: center;
position: relative;
}
.quizstyle {
padding-right: 50%;
}
.row {
text-align: left;
margin-left: 10%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="quizstyle">
<h3>Moths are a member of what order?</h3>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon</div>
<div> </div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy</div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera</div>
<h3>Question 2</h3>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1</div> <span id="demo"></span>
<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>
<h3>Question 3</h3>
<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>
</div>
<input type="submit" onclick="myFunction()" value="Submit" />
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close main div -->
<span>fdf</span> <span>fdf</span><span>fdf</span>
fd
<script>
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() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
hgf
<div> </div>

With these couple of changes, the text "Hello World" was getting displayed next to the answer.
Adding a css for the "demo" span tag to stay inline.
span#demo {
display: inline;
}
/* A small bonus */
.quizstyle {
padding-right: 20%;
}
Moving it inside your "row" div tag.
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1
<span id="demo"></span>
</div>
Ofcourse, you'll have to work out the other detailing (like adding sufficient margin between your row div and demo span, providing enough width for the span to be shown on same line, reducing it's size, giving it some color, etc.), but this kind of achieves what your original requirement was.

Just add float: right; for span#demo element

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();
});