We Keep Coding

JS function conflicting with CSS style

I have a radio button part into a large form which is styled in a way that when it's hovered or checked, it has a different background color. Though, I have an important js function for the rest of the form which keeps the style from working. It took me time to understand that the conflict came from that function, but I have no clue on how to solve this.
Here's what I got:
$("#general-form").on("click", "label", function() {
name_input = $(this).children("input").attr("name");
if (name_input) {
onglet = obj_critere_form.simulation_encours;
$("#simul_" + onglet + " input[name='" + name_input + "']").focus();
}
return false
});
obj_critere_form = new critere_form();
obj_critere_form.initialize();
#general-form .radio-toolbar input[type="radio"],
p {
display: none;
}
#general-form .radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
#general-form .radio-toolbar label:hover {
background-color: #bbb;
}
#general-form .radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-form">
<div class="radio-toolbar">
<h2>Options:</h2>
</br>
<input type="radio" id="radio1" name="radios" value="a1">
<label for="radio1">option 1</label>
<input type="radio" id="radio2" name="radios" value="a2">
<label for="radio2">option 2</label>
<input type="radio" id="radio3" name="radios" value="a3">
<label for="radio3">option 3</label>
</div>
</div>

The problem is return false; in the click handler. That's equivalent to event.preventDefault();. The default action of clicking on a label is to click on the element that the label is associated with by the for attribute; return false; prevents that from happening, so clicking on the label doesn't check the button.
I'm not sure why you have that in the click handler in the first place. All it does is prevent clicking on the label from working.
$("#general-form").on("click", "label", function() {
name_input = $(this).children("input").attr("name");
if (name_input) {
onglet = obj_critere_form.simulation_encours;
$("#simul_" + onglet + " input[name='" + name_input + "']").focus();
}
//return false
});
//obj_critere_form = new critere_form();
//obj_critere_form.initialize();
#general-form .radio-toolbar input[type="radio"],
p {
display: none;
}
#general-form .radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
#general-form .radio-toolbar label:hover {
background-color: #bbb;
}
#general-form .radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-form">
<div class="radio-toolbar">
<h2>Options:</h2>
</br>
<input type="radio" id="radio1" name="radios" value="a1">
<label for="radio1">option 1</label>
<input type="radio" id="radio2" name="radios" value="a2">
<label for="radio2">option 2</label>
<input type="radio" id="radio3" name="radios" value="a3">
<label for="radio3">option 3</label>
</div>
</div>

In this case it looks like you're using a library for the form which could have it's own styles.
Use this at the end of the CSS you need to come through but use it sparingly and with caution.
//example
color: blue !important;

multi-step form, not submitting on last stage

Update:
I have added new js code which fixed my issue and by adding it here, it may help others.
Multi-step form works (codepen), and I have integrated it into my server-side scripting. Still working. The code is all available here. (https://codepen.io/ActiveCodex/pen/OVBeMg#code-area) The button element labelled 'Next' moves the user along through the steps. On the last step, the JS changes the labelling of the button 'Next' to be a 'Submit' button but it doesn't submit to anywhere. I want to add that 'Submit' functionality without breaking the 'Next' button functionality. Either to submit via Ajax or the usual form 'post' method.
I wrapped the div id='form' into a <form> element and whilst that would submit, it did so even when the 'Next' button was clicked on and not only when the submit button was clicked.
(I'm not experienced in .js since perl & php are my norm). I added an event listener but the data is not in js variables. I am asking for tip on what I should be looking for - eg a listener or a submit function or something I can google for. I have tried to 'preventDefault()' but that has prevented everything on the form.
html code firstly...
<div id='form' class='form' action="/cgi-bin/real-estate-dashboard-dev/processing_scripts/edit-listings-data.pl" method='get'>
<h1 class='property_summary'>Property Summary</h1>
<input id="one" type="radio" name="stage" checked="checked" />
<input id="two" type="radio" name="stage" />
<input id="three" type="radio" name="stage" />
<input id="four" type="radio" name="stage" />
<input id="five" type="radio" name="stage" />
<input id="six" type="radio" name="stage" />
<div class="stages">
<label for="one">1</label>
<label for="two">2</label>
<label for="three">3</label>
<label for="four">4</label>
<label for="five">5</label>
<label for="six">6</label>
</div>
<span class="progress"><span></span></span>
<div class='panels'>
<div data-panel="one">
<h4>Stage 1</h4>
<p>Number of Receptions</p>
<select name="number_of_reception_rooms" style='padding: 10px;font-size:1.5em;'>
<option value='' style='font-weight:700;'>Number of Receptions</option>
<option value="1">1</option>
<option value="2" selected='selected'>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div data-panel="two">
<h4>Stage 2</h4>
<p>Number of Ensuites</p>
<select name="number_of_ensuites" style='padding: 10px;font-size:1.5em;'>
<option value='' style='font-weight:700;'>Number of Ensuites</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected='selected'>5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<button>Next</button>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js">
$('.form .stages label').click(function () {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 1;
});
$('.form button').click(function () {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 2;
$('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);
if (selectedIndex == 6) {
$('button').html('Submit');
}
});
// not working at all as I mentioned.
document.getElementById("form").addEventListener("click", function(e)
{
var bedrooms = e.number_of_bedrooms;
e.preventDefault();
console.log( 'number_of_bedrooms ' + number_of_bedrooms);
})
//document.getElementById("myForm").submit();
</script>
```document.getElementById("form").addEventListener("click", function(e)
{
//var number_of_bedrooms = e.target.number_of_bedrooms;
e.preventDefault();
//console.log( 'number_of_bedrooms ' + number_of_bedrooms);
})
So the expected result is that the 'Next' button continues to step me through the form but on the last step, the submit button must submit the data in the div <id='form'> to a new script when I click it.
...code that fixed my issue...
$('#myForm button').click(function(e) {
var radioButtons = $('#myForm input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
var numberForButtonAction = selectedIndex;
numberForButtonAction = numberForButtonAction + 2;
selectedIndex = selectedIndex + 2;
$('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);
if (numberForButtonAction <= 5 ){
$('button').html('Next');
document.getElementById("myForm").addEventListener("click", function(event){
e.preventDefault();
});
}
if (numberForButtonAction == 6 ){
$('button').html('Submit');
document.getElementById("myForm").addEventListener("click", function(event){
e.preventDefault();
});
}
if (selectedIndex > 6) {
$('button').html('Submit');
}
});

I think I have a solution for you.
First of all, I wrapped the entire form with the form tag, and set onsubmit function (alter it for your needs).
The second thing I did was to change the onclick listener on the next button. I changed it from button tag to input tag with type="button". When the selected is equal to 6, I'm changing it to type="submit". That way, when you click the submit, the form will submit!, and when you click next it will to its regular action.
Here is the code:
$('.form .stages label').click(function() {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 1;
});
$('#last').click(function() {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 2;
$('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);
if (selectedIndex == 6) {
document.getElementById('last').value = "Submit";
document.getElementById('last').type = "submit";
return false;
}
});
function doSomething() {
console.log('submitted');
}
.stages {
font-size: 0;
text-align: justify;
}
.stages:after {
content: '';
display: inline-block;
font-size: 0;
text-align: justify;
width: 100%;
}
input[type="radio"] {
display: none;
}
.stages label {
background: #ffffff;
border: solid 5px #c0c0c0;
border-radius: 50%;
cursor: pointer;
display: inline-block;
font-size: 0;
font-weight: 700;
height: 50px;
line-height: 50px;
position: relative;
text-align: center;
vertical-align: top;
width: 50px;
z-index: 1;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.stages label:after {
content: '\2713';
color: #0cc39f;
display: inline-block;
font-size: 16px;
}
#one:checked~.stages label[for="one"],
#two:checked~.stages label[for="two"],
#three:checked~.stages label[for="three"],
#four:checked~.stages label[for="four"],
#five:checked~.stages label[for="five"],
#six:checked~.stages label[for="six"] {
border-color: #0cc39f;
}
.stages label.active {
border-color: purple !important;
}
#one:checked~.stages label,
#two:checked~.stages label[for="one"]~label,
#three:checked~.stages label[for="two"]~label,
#four:checked~.stages label[for="three"]~label,
#five:checked~.stages label[for="four"]~label,
#six:checked~.stages label[for="five"]~label {
font-size: 1rem;
}
#one:checked~.stages label:after,
#two:checked~.stages label[for="one"]~label:after,
#three:checked~.stages label[for="two"]~label:after,
#four:checked~.stages label[for="three"]~label:after,
#five:checked~.stages label[for="four"]~label:after,
#six:checked~.stages label[for="five"]~label:after {
display: none;
}
.progress>span {
background: #c0c0c0;
display: inline-block;
height: 5px;
transform: translateY(-2.75em);
transition: 0.3s;
width: 0;
}
#two:checked~.progress span {
width: calc(100% / 5 * 1);
}
#three:checked~.progress span {
width: calc(100% / 5 * 2);
}
#four:checked~.progress span {
width: calc(100% / 5 * 3);
}
#five:checked~.progress span {
width: calc(100% / 5 * 4);
}
#six:checked~.progress span {
width: calc(100% / 5 * 5);
}
.panels div {
display: none;
}
#one:checked~.panels [data-panel="one"],
#two:checked~.panels [data-panel="two"],
#three:checked~.panels [data-panel="three"],
#four:checked~.panels [data-panel="four"],
#five:checked~.panels [data-panel="five"],
#six:checked~.panels [data-panel="six"] {
display: block;
}
/* Custom code for the demo */
html,
button,
input,
select,
textarea {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
body {
background-color: #0cc39f;
margin: 0;
padding: 0 2em;
}
a {
color: #0cc39f;
}
h2,
h4 {
margin-top: 0;
}
.form {
background: #ffffff;
box-shadow: 0 5px 10px rgba(0, 0, 0, .4);
margin: 4em;
min-width: 480px;
padding: 1em;
}
.panels div {
border-top: solid 1px #c0c0c0;
margin: 1em 0 0;
padding: 1em 0 0;
}
input {
box-sizing: border-box;
display: block;
padding: .4em;
width: 100%;
}
#last {
background-color: #0cc39f;
border: 0;
color: #ffffff;
cursor: pointer;
font-weight: 700;
margin: 1em 0 0 0;
padding: 1em;
width: unset;
}
#last:hover {
opacity: 0.8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<h2>Multi Page Form (Pure CSS)</h2>
<p>Divide long forms, enable users to flick back and forward.</p>
<p>Use JS to validate form at the end of the stage and highlight tab(s) that contain(s) error.</p>
<form onsubmit="doSomething(); return false;">
<input id="one" type="radio" name="stage" checked="checked" />
<input id="two" type="radio" name="stage" />
<input id="three" type="radio" name="stage" />
<input id="four" type="radio" name="stage" />
<input id="five" type="radio" name="stage" />
<input id="six" type="radio" name="stage" />
<div class="stages">
<label for="one">1</label>
<label for="two">2</label>
<label for="three">3</label>
<label for="four">4</label>
<label for="five">5</label>
<label for="six">6</label>
</div>
<span class="progress"><span></span></span>
<div class="panels">
<div data-panel="one">
<h4>Stage 1</h4>
<input type="text" placeholder="First Name" />
</div>
<div data-panel="two">
<h4>Stage 2</h4>
<input type="text" placeholder="Last Name" />
</div>
<div data-panel="three">
<h4>Stage 3</h4>
<input type="text" placeholder="Address" />
</div>
<div data-panel="four">
<h4>Stage 4</h4>
<input type="text" placeholder="Email" />
</div>
<div data-panel="five">
<h4>Stage 5</h4>
<input type="text" placeholder="Phone Number" />
</div>
<div data-panel="six">
<h4>Stage 6</h4>
<input type="text" placeholder="Comment" />
</div>
</div>
<input type="button" id="last" value="Next">
<br><br>
</form>
</div>

JavaScript quiz with multiple questions

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

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

CSS styling my page, sorry guys im a noob

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

Maybe you can use tooltip? Example from w3schools
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">HINT
<span class="tooltiptext">Put your hint here</span>
</div>

I'm pretty sure you should just use Tooltip instead of mouseover ^^
JQuery Tooltip
$("#hint1").tooltip();
with title as attribute for the texts.
Here's the Codepen Demo

I found the answer, skipped the animations but got it working using this code below:
$(document).ready(function(){
$('#hint2').hover(function() {
$(this).text("hover text");
},
function() {
$(this).text("back to origonal");
});
});

Block-inline not appearing after the radio button is pressed in my code

Evening everyone,
Im trying to make an inline-block to appear after I press the last radio button, I've tried .show() and .checked() events, but I'm becoming desperate now.
Also if you could tell me at the same how I can make that appearing textbox to become REQUIRED that would be really helpful. Thank you.
Here are the codes:
function msgsend(ID) {
if (ID === "nameInfo") {
return "First one";
}
else if (ID === "emailInfo") {
return "Second one";
}
else if (ID === "phoneInfo") {
return "Third one";
}
else if (ID === "busInfo") {
return "Fourth one";
}
else if (ID === "rulesInfo") {
return "Fifth one";
}
else if (ID === "pubInfo") {
return "Sixth one";
}};
$(".hoverInfo").mousemove(function(e) {
var hoverID = $(this).attr("ID");
var hoverID = msgsend(hoverID);
$("#hoverdiv").text(hoverID).show();
$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+10);
}).mouseout(function() {
$("#hoverdiv").hide();
});
$("#busStopLocation").hide();
if (("#busStopElse").checked) {
$("#busStopLocation").show();
}
else {
$("#busStopLocation").hide();
};
* {
padding: 0px;
margin: 0px;
font-family: "Aller", sans-serif;
font-weight: lighter;
font-size: 16px;
}
#mainpage {
margin: 10px;
}
#mainpage a:link, a:visited {
color: #2e8cb8;
text-decoration: underline;
}
#mainpage a:hover {
color: #265165;
}
li, #top p {
padding: 5px 0px;
}
#top ul:nth-child(3) li {
position: relative;
left: 50px;
display: block;
}
#top ul:nth-child(3) li label {
padding-left: 10px;
}
#bottom {
margin-top: 20px;
}
#bottom p {
padding: 10px 0px;
}
#bottom label {
margin-left: 10px;
}
label {
margin-right: 10px;
}
span {
margin-left: 5px;
background-color: lightblue;
border: 1px solid black;
}
.sbutton, .rbutton {
margin-top: 50px;
border: 1px solid #1c1c1c;
background-color: lightblue;
padding: 5px 10px;
}
.sbutton:hover, .rbutton:hover {
background-color: #265165;
color: white;
}
#hoverdiv {
display: none;
position: absolute;
pointer-events: none;
font-size: 16px;
background-color: lightgray;
color: black;
border: 1px solid black;
padding: 8px;
border-radius: 5px;
}
<BODY ID="mainpage">
<FORM NAME="registration" METHOD="post" ACTION="form_process.php" AUTOCOMPLETE="on">
<DIV ID="top">
<UL>
<LI>
<LABEL FOR="name">Your name: *</LABEL>
<INPUT ID="name" TYPE="text" NAME="userName" AUTOFOCUS REQUIRED PLACEHOLDER="Firstname Surname" SIZE="40" />
<SPAN CLASS="hoverInfo" ID="nameInfo">?</SPAN>
</LI>
<LI>
<LABEL FOR="email">Your email: *</LABEL>
<INPUT ID="email" TYPE="email" NAME="userEmail" REQUIRED PLACEHOLDER="Example#example.com" SIZE="40" />
<SPAN CLASS="hoverInfo" ID="emailInfo">?</SPAN>
</LI>
<LI>
<LABEL FOR="phone">Your phone number: *</LABEL>
<INPUT ID="phone" TYPE="tel" NAME="userTel" REQUIRED PLACEHOLDER="Format: 0123456789" SIZE="40" MAXLENGTH="10" />
<SPAN CLASS="hoverInfo" ID="phoneInfo">?</SPAN>
</LI>
</UL>
<P>Bus stop you're coming into bus: *
<SPAN CLASS="hoverInfo" ID="busInfo">?</SPAN>
</P>
<UL>
<LI>
<INPUT TYPE="radio" NAME="busStop" ID="busStopUni" REQUIRED CHECKED><LABEL FOR="busStopUni">University</LABEL>
</LI>
<LI>
<INPUT TYPE="radio" NAME="busStop" ID="busStopBus" REQUIRED><LABEL FOR="busStopBus">Bus Station</LABEL>
</LI>
<LI>
<INPUT TYPE="radio" NAME="busStop" ID="busStopAir" REQUIRED><LABEL FOR="busStopAir">Air Port</LABEL>
</LI>
<LI>
<INPUT TYPE="radio" NAME="busStop" ID="busStopElse" REQUIRED><LABEL FOR="busStopElse">Somewhere else. Where?</LABEL>
<INPUT TYPE="text" NAME="busStop" ID="busStopLocation" SIZE="30" PLACEHOLDER="Which bus stop?" REQUIRED />
</LI>
</UL>
</DIV>
<DIV ID="bottom">
<P>
<INPUT TYPE="checkbox" NAME="checkedRules" VALUE="yes" REQUIRED /><LABEL FOR="checkedRules" CLASS="hoverInfo" ID="rulesInfo">I have read the Rules and Conditions of a trip.</LABEL>
</P>
<P>
<INPUT TYPE="checkbox" NAME="namePublished" VALUE="yes" /><LABEL FOR="namePublished" CLASS="hoverInfo" ID="pubInfo">My name can be published on the Participant list.</LABEL>
</P>
</DIV>
<INPUT TYPE="submit" VALUE="Submit" CLASS="sbutton">
<INPUT TYPE="reset" VALUE="Reset" CLASS="rbutton">
</FORM>
<DIV ID="hoverdiv"></DIV>
<SCRIPT TYPE="text/javascript" SRC="jquery.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" SRC="app.js"></SCRIPT>
</BODY>

JS to show/hide the field and make it required or not :
function msgsend(ID) {
if (ID === "nameInfo") {
return "First one";
}
else if (ID === "emailInfo") {
return "Second one";
}
else if (ID === "phoneInfo") {
return "Third one";
}
else if (ID === "busInfo") {
return "Fourth one";
}
else if (ID === "rulesInfo") {
return "Fifth one";
}
else if (ID === "pubInfo") {
return "Sixth one";
}};
$(".hoverInfo").mousemove(function(e) {
var hoverID = $(this).attr("ID");
var hoverID = msgsend(hoverID);
$("#hoverdiv").text(hoverID).show();
$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+10);
}).mouseout(function() {
$("#hoverdiv").hide();
});
$("#busStopLocation").hide();
$(document).ready(function(){
$('input[type=radio]').on('change',function(){
if ($("#busStopElse").is(':checked')) {
$("#busStopLocation").show().attr('required',true);
}else{
$("#busStopLocation").hide().removeAttr('required');
};
});
});

Near the :
if (("#busStopElse").checked) {
$("#busStopLocation").show();
}
Arent you missing the $ character. There are just brackets. I think it interprets this as just a string or something and it always returns false.
But I'm curious,
it doesn't throw a syntax error, but what it's used for in Javascript? Can anyone comment on this ?