I have a quiz that should move on to the next question once you select an answer but at the moment my code doesn't work and it allows the user to select multiple answers, without anything happening afterwards.
Once they finish the last question their result should be displayed to them.
document.getElementById("beginquiz").addEventListener("click", startQuiz);
function startQuiz() {
document.getElementById("intro").style.display = "none";
document.getElementById("q1").style.display = "block";
}
var answerData = {
"p": 0,
"vp_w": 0,
"vp_e": 0,
"vp_a": 0,
"vp_s": 0
};
var buttons = document.querySelectorAll(".button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = buttonClicked;
}
function buttonClicked(buttonNext) {
var target = answer.target; //1. 'this' is parent, need target
console.log(target);
//get the current element's data-score value
var selectedType = target.dataset.score; //2. score is the value
//increase the selected answer's 'type' by 1
console.log(selectedType);
answerData[selectedType]++;
//Hide the current question div
this.parentElement.style.display = "none";
//Work out what the next question div is
var nextQuestion = this.parentElement.dataset.next;
//Display the next question element
console.log(nextQuestion);
document.getElementById(nextQuestion).style.display = "block";
if(document.getElementById(nextQuestion))
document.getElementById(nextQuestion).style.display = "block";
else
printResult();
}
function calculateResult (answerData){
var highest = Math.max(total_points.p, total_points.vp_s, total_points.vp_e, total_points.vp_w, total_points.vp_a);
var result;
for (var i in total_points) {
if (total_points.hasOwnProperty(i)){
if (total_points[i] === highest){
result = i;
}
}
}
switch(result) {
case 'p':
result = 'President';
break;
case 'vp_w':
result = 'Vice-President Welfare';
break;
case 'vp_e':
result = 'Vice-President Education';
break;
case 'vp_s':
result = 'Vice-President Sports';
break;
case 'vp_a':
result = 'Vice-President Activities';
break;
default:
break;
}
return result;
};
function printResult() {
document.getElementById('result').innerHTML = '<h2>You are: '+result+'</h2>';
}
.question,
#result {
display: none;
}
.button li {
border: 1px solid;
border-radius: 3px;
background-color: #eee;
text-align: center;
line-height: 2em;
padding: 0.5em;
margin: 0.5em;
width: 80%;
margin: 0 auto;
}
.button li:hover {
color: #bfbfbf;
background-color: #555;
}
#intro,
.question,
#result {
max-width: 600px;
margin: 0 auto;
}
#beginquiz {
border: 1px solid;
border-radius: 3px;
background-color: #eee;
text-align: center;
line-height: 2em;
padding: 0.5em;
margin: 0.5em;
width: 20em;
margin: 0 auto;
}
#beginquiz:hover {
color: #bfbfbf;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="intro">
<button id="beginquiz">Start the quiz</button>
</div>
<form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">
<div class="question" id="q1" data-next="q2">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q2" data-next="q3">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q3" data-next="q4">
<li><div id="q3" data-next="q4">What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q4">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
</form>
<div id="result">
<h2>You are:</h2>
</div>
In your buttonclicked function you had some errors on how you were getting the elements. Here is the updated function. There was another error in the printResults that there was no call to display the results div. You also are not calling the calulateResults functions.
function buttonClicked(buttonNext) {
//var target = answer.target; //1. 'this' is parent, need target
var target;
for(i=answer.length-1;i>=0;i--){
if(answer[i].checked == true){
target = answer[i];
break;
}
}
console.log(target);
//get the current element's data-score value
var selectedType = target.dataset.score; //2. score is the value
//increase the selected answer's 'type' by 1
console.log(selectedType);
answerData[selectedType]++;
//Hide the current question div
console.log(target.parentElement.id);
//this.parentElement.style.display = "none";
target.parentElement.style.display = "none"
//Work out what the next question div is
var nextQuestion = target.parentElement.dataset.next;
//Display the next question element
console.log(nextQuestion);
//document.getElementById(nextQuestion).style.display = "block";
if(document.getElementById(nextQuestion))
document.getElementById(nextQuestion).style.display = "block";
else
printResult();
}
You needed to use a for loop to get the target answer in the array of answers. I decremented the loop to get the last answered question. The other change is to how you got the parent ID. With this.parentElement it was coming back with the body due to the this element was focused on the form, the element the clcik event was fired on. The last thing I commented out the extra document.getElementById(nextQuestion).style.display = "block"; before the check.
Related
I am trying to make a quiz app with many questions and Yes or No answers.
So I made a design to make a radio button look like a button and for it to be checked if selected.
I also used javascript to make a slider for that questions.
So the problem is the checked design worked with the first question in the slider but would not work for the rest of the questions.
Here is my code, I don't think that the error in JS but I included it anyways.
const myslide = document.querySelectorAll('.myslide'),
dot = document.querySelectorAll('.dot');
let counter = 1;
slidefun(counter);
let timer = setInterval(autoSlide, 8000);
function plusSlides(n) {
counter += n;
slidefun(counter);
resetTimer();
}
function currentSlide(n) {
counter = n;
slidefun(counter);
resetTimer();
}
function resetTimer() {
clearInterval(timer);
timer = setInterval(autoSlide, 8000);
}
function slidefun(n) {
let i;
for(i = 0;i<myslide.length;i++){
myslide[i].style.display = "none";
}
for(i = 0;i<dot.length;i++) {
dot[i].className = dot[i].className.replace(' active', '');
}
if(n > myslide.length){
counter = 1;
}
if(n < 1){
counter = myslide.length;
}
myslide[counter - 1].style.display = "block";
dot[counter - 1].className += " active";
}
.txt input[type="radio"] {
opacity:0.011;
z-index:100;
}
.txt label {
padding:5px;
border:1px solid #000;
border-radius:10px;
cursor:pointer;
}
.txt label:hover {
background: rgb(238, 255, 5);
}
input[type="radio"]:checked + label {
background:yellow;
}
<div class="myslide fade">
<div class="txt">
<p>What is the question two ?</p>
<input id="yes" type='radio' name="result" value="yes">
<label for="yes">Yes</label>
<br>
<input id="no" type='radio' name="result" value="no">
<label for="no">No</label>
<br>
</div>
<img src="{% static 'img/img1.jpg'%}" style="width: 100%; height: 100%;">
</div>
<div class="myslide fade">
<div class="txt">
<p>What is the question one ?</p>
<input id="yes" type='radio' name="Question1" value="yes">
<label for="yes">Yes</label>
<br>
<input id="no" type='radio' name="Question1" value="no">
<label for="no">No</label>
<br>
</div>
<img src="{% static 'img/img1.jpg'%}" style="width: 100%; height: 100%;">
</div>
Thanks in advance
The problem is that your radio inputs can't have the same ids and have the labels target those same ids. Ids are supposed to be a unique occurrence in the DOM, and the labels are also supposed to reference those unique occurrences. So you need to change the id of the inputs and the for of the labels to correlate to each other specifically.
For example, changing them to "yes1 & no1, and yes2 & no2". This should solve your issue:
<p>What is the question one ?</p>
<input id="yes1" type='radio' name="Question1" value="yes">
<label for="yes1">Yes</label>
<br>
<input id="no1" type='radio' name="Question1" value="no">
<label for="no1">No</label>
and
<p>What is the question two ?</p>
<input id="yes2" type='radio' name="result" value="yes">
<label for="yes2">Yes</label>
<br>
<input id="no2" type='radio' name="result" value="no">
<label for="no2">No</label>
Why is my code not working? How to make a button active after selecting one of the checkboxes? And how to dynamically transfer a text from checkbox to rezBlock_1 block?
CODPEN
https://codepen.io/RJDio/pen/RwPgaaZ
document.addEventListener("DOMContentLoaded", () => {
let radioBtn = document.querySelectorAll('.radioBtn');
let activeBtn = document.querySelector('.activeBtn');
let formRadio = document.querySelector('.formRadio');
let rezBlock_1 = document.querySelector('.rezBlock_1');
function checkRadio(){
for(let i =0; i < radioBtn.length; i++){
if(radioBtn[i].hasAttribute('checked')){
activeBtn.removeAttribute('disabled');
let radioValue = radioBtn[i].innerText();
rezBlock_1.innerText(radioValue);
}
}
}
checkRadio();
});
.blockRez{
width: 200px;
height: 100px;
border:1px solid red;
}
#rezBlock_1 {
width: 150px;
height: 30px;
border:1px solid blue;
}
<div class="block1">
<form class="formRadio" action="handler.php">
<p><b>Make your choose<b></p>
<p><input class="radioBtn" name="dzen" type="radio" value="red">Red</p>
<p><input class="radioBtn" name="dzen" type="radio" value="green">Green</p>
<p><input class="radioBtn" name="dzen" type="radio" value="blue">Blue</p>
<p><button class="activeBtn" disabled value="Choose">Choose</button></p>
</form>
</div>
<div class="blockRez">
<div id="rezBlock_1"></div>
</div>
You can add an eventListener for the click event. To re-activate a button set disabled to false.
document.addEventListener("DOMContentLoaded", () => {
let inputs = document.querySelectorAll(".radioBtn");
inputs.forEach(input => input.addEventListener("click", () => {document.querySelector('.activeBtn').disabled = false;}))
});
.blockRez{
width: 200px;
height: 100px;
border:1px solid red;
}
#rezBlock_1 {
width: 150px;
height: 30px;
border:1px solid blue;
}
<div class="block1">
<form class="formRadio" action="handler.php">
<p><b>Make your choose<b></p>
<p><input class="radioBtn" name="dzen" type="radio" value="red">Red</p>
<p><input class="radioBtn" name="dzen" type="radio" value="green">Green</p>
<p><input class="radioBtn" name="dzen" type="radio" value="blue">Blue</p>
<p><button class="activeBtn" disabled value="Choose">Choose</button></p>
</form>
</div>
<div class="blockRez">
<div id="rezBlock_1"></div>
</div>
I'm trying to create a BMR calculation embedded in my site. I have it working except for the gender portion (if male vs female, different calculations)
I understand that I need an adlistener but doesn't seem to be working. I think I am not referencing it properly.
Here's my code:
var theForm = document.forms["RMRform"];
var bmr;
function RMRcalc() {
var weight = document.getElementById("weight").value;
var height = document.getElementById("height").value;
var age = document.getElementById("age").value;
var gender = document.getElementById("gender").value;
var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
rad[i].addEventListener('change', function() {
(prev) ? console.log(prev.value): null;
if (this !== prev) {
prev = this;
}
console.log(this.value)
});
}
var activitylevel = new Array();
activitylevel["sedentary"] = 1.2;
activitylevel["low"] = 1.3;
activitylevel["moderate"] = 1.5;
activitylevel["high"] = 1.7;
function getActivityLevel() {
var activityLevelamount = 0;
var theForm = document.forms["RMRform"];
var selectedActivity = theForm.elements["activity"];
activityLevelamount = activitylevel[selectedActivity.value];
return activityLevelamount;
}
if (i = this) {
bmr = ((10 * weight) + (6.25 * height) - (5 * age) - 161) * getActivityLevel();
} else {
bmr = ((10 * weight) + (6.25 * height) - (5 * age) + 5) * getActivityLevel();
}
}
document.getElementsByTagName("button")[0].addEventListener("click", function() {
RMRcalc();
document.getElementById('results').innerHTML = bmr;
})
body {
font: 15px gothic, sans-serif;
letter-spacing: 1px;
}
input {
width: 100%;
}
input[type=number] {
border: none;
border-bottom: 1px solid grey;
}
button[type=button] {
background-color: #ddcecb;
border: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #95483e;
padding: 16px 32px;
text-decoration: none;
letter-spacing: 1px;
margin: 4px 2px;
}
input[type=text]:focus {
border: 1px solid #555;
}
.form-inline label {
margin: 5px 10px 5px 0;
}
#media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
<form action="" id="RMRform">
<label for='gender' class="inlinelabel">
Female </label>
<input type="radio" id="gender" name="gender" value="fem" checked onclick="RMRcalc()" /><br>
<label for='gender' class="inlinelabel">
Male </label>
<input type="radio" id="gender" name='gender' value="masc" onclick="RMRcalc()" /> <br> Weight (kg):<br>
<input type="number" id="weight"><br><br> Height (cm):<br>
<input type="number" id="height"><br><br> Age (years):<br>
<input type="number" id="age"><br><br> Activity Level:
<select id="activity" name="activity">
<option value="sedentary">sedentary (1-2x/week)</option>
<option value="low">low (2-3x/week)</option>
<option value="moderate">moderate (3-4x/week)</option>
<option value="high">high (5x/week)</option>
</select>
</form> <br>
<button type="button" onclick="">
calculate</button>
<p>Your Daily Estimated Requirements</p>
<div id="results"></div>
With this, there's just no calculation showing.
Thanks in advance!
A closing } is missing for the #media query.
There shouldn't be a variable declaration in your if condition: if (var i=this). Remove the var.
Both of your radio input have the same id="gender". Id's should be unique. Consider using a class instead. This will cause problems when you later use the gender variable for your if male vs female calculations because of this selector:
var gender = document.getElementById("gender").value;
For rad to be defined in your loop...
var rad = document.myForm.myRadios;
...you'll need to change myRadios to gender, because that's the name of your radio inputs. You'll also need to give your form the name myForm.
<form action="" id="RMRform" name="myForm">
Perhaps you're looking for something in this region...
function calc () {
const gender = document.querySelector('input[name="gender"]:checked').value,
weight = document.getElementById('weight').value,
height = document.getElementById('height').value,
age = document.getElementById('age').value,
activity = document.getElementById('activity').value;
// calculate base metric value
let metricBase = ((10 * weight) + (6.25 * height) - (5 * age));
// calculate per gender
metricBase = (gender === 'fem') ? metricBase - 161 : metricBase + 5;
// calculate with inline activity values
const bmr = Math.round( metricBase * parseFloat(activity) );
// format caloric intake output
document.getElementById('results').innerHTML = `${bmr.toLocaleString()} calories/day`;
}
// prevents form change listener until after first calculation
let firstCalc = true;
document.getElementById('calc').addEventListener('click', () => {
if (firstCalc) document.querySelector('form').onchange = calc;
firstCalc = false;
calc();
}, false);
body {
}
body, input {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 14px;
letter-spacing: 1px;
}
input[type="radio"] {
display: inline-block;
width: 1rem;
}
input[type="number"] {
border: none;
border-bottom: 1px solid #ccc;
}
.group {
padding: .5rem 0;
}
<form>
<div class="group">
<label class="radio">
<input type="radio" name="gender" value="fem" checked />
Female
</label>
<label class="radio">
<input type="radio" name='gender' value="masc" />
Male
</label>
</div>
<div class="group">
<label for="weight">Weight (kg):</label>
<input type="number" id="weight" value="79" />
</div>
<div class="group">
<label for="weight">Height (cm):</label>
<input type="number" id="height" value="172" />
</div>
<div class="group">
<label for="weight">Age (years):</label>
<input type="number" id="age" value="22" />
</div>
<div class="group">
<label for="activity">Activity Level:</label>
<select id="activity">
<option value="1.2" selected>Sedentary (1-2x/week)</option>
<option value="1.3">Low (2-3x/week)</option>
<option value="1.5">Moderate (3-4x/week)</option>
<option value="1.7">High (5x/week)</option>
</select>
</div>
<button type="button" id="calc">Calculate</button>
</form>
<p id="results"></p>
Here is what i see (i am quite new to JS so i may not see everything) :
There is no opening head tag (not sure if that's a problem).
The gender radio buttons both have the same id. IDs should be unique. And because of this my guess is that this code should only give you the value for fem no ?:
html:
<input type="radio" id="gender" name="gender" value="fem" checked
onclick="RMRcalc()" />
<input type="radio" id="gender" name='gender' value="masc"
onclick="RMRcalc()" />
js:
var gender = document.getElementById("gender").value;
In your for-loops i would use let instead of var, otherwise you might get in trouble someday. Checkout this post.
for (let i = 0; i < rad.length; i++) {
rad[i].addEventListener('change', function () {
I didn't understand this in your function RMRcalc : if (var i = this)
Below it's my code that I made and I do not want to skip the question without checking any option from the question when I press button Next and I tried by using: checked as the code below shows, but it does not work.
And also it does not show quiz results when I finish the quiz and click the Submit button, it does not show results how many questions I got correct like the JS code is?
<div id = "results">
<form id="quiz-form">
<div class="quiz">
<div id="pytja1" class="questions1">
<span class="quest1">I am a ?</span><br/>
<input type="radio" name="q1" value="male" id="correct"> Male<br/>
<input type="radio" name="q1" value="female" id="correct2"> Female<br/>
<input type="radio" name="q1" 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="q2" value="8" class="correct"> 8<br/>
<input type="radio" name="q2" value="5"> 5<br/>
<input type="radio" name="q2" 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="q3" value="BMW" /> BMW <br/>
<input type="radio" name="q3" value="Volkswagen" class="correct" /> Volkswagen<br/>
<input type="radio" name="q3" 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="q4" value="2017" /> 2017<br/>
<input type="radio" name="q4" value="2015" /> 2015<br/>
<input type="radio" name="q4" value="2019" class="correct" /> 2019<br/>
<input id="bot-submit" type="submit" value="Submit" />
</div>
</div>
</form>
</div>
form {
width: 100%;
position: relative;
float: left;
padding-top: 50px;
}
.quiz {
margin: 0px auto;
width: 250px;
height: 100px;
position: absolute;
top: 460px;
left: 42%;
}
.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;
}
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';
}
}
function radioChecked(form) {
let checked = form.querySelector("input[type=radio]:checked");
let value;
if (!checked) {
alert("You need to select one option");
return;
} else {
value = checked.value;
}
results.push(value);
}
let questions = [
{
prompt: "I am a ?\n(a) Male\n\ (b) Female\n(c) Others",
answer: "a"
},
{
prompt: "Football has letters ?\n(a) 8\n\ (b) 5\n(c) 6",
answer: "a"
},
{
prompt: "VW stands for ?\n(a) BMW \n\ (b) Volkswagen\n(c) Audi",
answer: "b"
},
{
prompt: "What year it is ?\n(a) 2017 \n\ (b) 2015\n(c) 2019",
answer: "c"
}
];
let score = 0;
for(let i = 0; i < questions.length; i++){
let response = window.prompt(questions[i].prompt);
if(response == questions[i].answer){
score++;
alert("Correct!");
} else {
alert("WRONG!");
}
}
alert("you got " + score + "/" + questions.length);
document.getElementById("bot-submit").addEventListener("click",
function(e){
e.preventDefault();
})
Check if this is what you want. You have a lots of unnecessary code but i'm not getting into that now. You just needed the questions array for the window prompt to work.
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');
let currentQues;
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';
}
}
function radioChecked(form) {
let checked = form.querySelector("input[type=radio]:checked");
let value;
if (!checked) {
alert("You need to select one option");
return;
} else {
value = checked.value;
}
results.push(value);
}
let questions = [
{
prompt: "I am a ?\n(a) Male\n\ (b) Female\n(c) Others",
answer: "a"
},
{
prompt: "Football has letters ?\n(a) 8\n\ (b) 5\n(c) 6",
answer: "a"
},
{
prompt: "VW stands for ?\n(a) BMW \n\ (b) Volkswagen\n(c) Audi",
answer: "b"
},
{
prompt: "What year it is ?\n(a) 2017 \n\ (b) 2015\n(c) 2019",
answer: "c"
}
];
let score = 0;
for(let i = 0; i < questions.length; i++){
let response = window.prompt(questions[i].prompt);
console.log(response);
if(response == questions[i].answer){
score++;
alert("Correct!");
}
else if(response !== questions[i].answer && response !== 'a' && response !== 'b' && response !== 'c'){
alert("You need to select one option");
i--;
}
else {
alert("WRONG!");
}
}
alert("you got " + score + "/" + questions.length);
document.getElementById("bot-submit").addEventListener("click",
function(e){
e.preventDefault();
})
form {
width: 100%;
position: relative;
float: left;
padding-top: 50px;
}
.quiz {
margin: 0px auto;
width: 250px;
height: 100px;
position: absolute;
top: 460px;
left: 42%;
}
.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;
}
<div id = "results">
<form id="quiz-form">
<div class="quiz">
<div id="pytja1" class="questions1">
<span class="quest1">I am a ?</span><br/>
<input type="radio" name="q1" value="male" id="correct"> Male<br/>
<input type="radio" name="q1" value="female" id="correct2"> Female<br/>
<input type="radio" name="q1" 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="q2" value="8" class="correct"> 8<br/>
<input type="radio" name="q2" value="5"> 5<br/>
<input type="radio" name="q2" 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="q3" value="BMW" /> BMW <br/>
<input type="radio" name="q3" value="Volkswagen" class="correct" /> Volkswagen<br/>
<input type="radio" name="q3" 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="q4" value="2017" /> 2017<br/>
<input type="radio" name="q4" value="2015" /> 2015<br/>
<input type="radio" name="q4" value="2019" class="correct" /> 2019<br/>
<input id="bot-submit" type="submit" value="Submit" />
</div>
</div>
</form>
</div>
I have been trying to create a HTML form consisting of checkboxes in a dropdown. I have been able to do this part. But when you click on a particular dropdown, the remaining dropdown shift down. on the second click th dropdown collapses and they return to their original place. Please help me to correct this problem. I am trying to keep the position of the dropdown constant, if or not the checkboxes are visible.
What I am trying to achieve is something like the filters on the left hand side at http://www.luxuryretreats.com/. Would be thankful for any advise!
Here is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display = "block";
} else {
document.getElementById('ScrollCountry').style.display = 'none';
}
}
function ExposeList2() {
var showstatus = document.getElementById('Scrollguests').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollguests').style.display = "block";
} else {
document.getElementById('Scrollguests').style.display = 'none';
}
}
function ExposeList3() {
var showstatus = document.getElementById('Scrollminprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollminprice').style.display = "block";
} else {
document.getElementById('Scrollminprice').style.display = 'none';
}
}
function ExposeList4() {
var showstatus = document.getElementById('Scrollmaxprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollmaxprice').style.display = "block";
} else {
document.getElementById('Scrollmaxprice').style.display = 'none';
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div>
<div id="ScrollCountry"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5"
value="Turks & Caicos">Turks & Caicos<br>
<br />
</div>
</div>
<img src="original2.png" onmouseover="this.src='onhover2.png'"
onmouseout="this.src='original2.png'" onclick="ExposeList2()">
<div>
<div id="Scrollguests"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="n1" name="n1" value="4">2 - 4<br>
<input type="checkbox" id="n2" name="n2" value="6">4 - 6<br>
<input type="checkbox" id="n3" name="n3" value="8">6 - 8<br>
<input type="checkbox" id="n4" name="n4" value="10">8 -
10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br>
<br />
</div>
</div>
<img src="original3.png" onmouseover="this.src='onhover3.png'"
onmouseout="this.src='original3.png'" onclick="ExposeList3()">
<div>
<div id="Scrollminprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mn1" name="mn1" value="200">200<br>
<input type="checkbox" id="mn2" name="mn2" value="300">300<br>
<input type="checkbox" id="mn3" name="mn3" value="400">400<br>
<input type="checkbox" id="mn4" name="mn4" value="500">500<br>
<input type="checkbox" id="mn5" name="mn5" value="600">600<br>
<br />
</div>
</div>
<img src="original4.png" onmouseover="this.src='onhover4.png'"
onmouseout="this.src='original4.png'" onclick="ExposeList4()">
<div>
<div id="Scrollmaxprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mx1" name="mx1" value="600">600<br>
<input type="checkbox" id="mx2" name="mx2" value="700">700<br>
<input type="checkbox" id="mx3" name="mx3" value="800">800<br>
<input type="checkbox" id="mx4" name="mx4" value="900">900<br>
<input type="checkbox" id="mx5" name="mx5" value="1000">1000<br>
</div>
</div>
<input type="submit" />
</form>
</body>
</html>
You should put a position: absolute on your dropdown list. That way the other dropdown will not be impacted by the fact that you have open / close the other one.
Instead of using the display attribute, use the visibility attribute (visibility = visible | hidden). That would reserve the space required for the DIV irrespective whether is displayed or not.
Modified version here at jsfiddle.