CSS styling my page, sorry guys im a noob - javascript

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

Related

changing css style with javascript

I wrote a html with 3 radio buttons. Each radio button is contained in a div container. I would like that if a radio button is checked, the background of the div container containing the checked radio-button should become blue, and the background the div containing the other unchecked radio-buttons should be white. I tried to achieve that with javascript and css, but it does not work. Could someone please help me to write correctly this javascript ?.
<!DOCTYPE html>
<html>
<style>
.stylingForCheckedRadioButton {
color: white;
background-color: blue;
border-style: solid;
border-width: thin;
border-color: grey;
margin-bottom: 7px;
width: 10%;
height: 50px;
border-radius: 6px;
}
.stylingForUnCheckedRadioButton {
color: black;
background-color: white;
border-style: groove;
border-width: thin;
border-color: #DCDCDC;
margin-bottom: 7px;
width: 10%;
height: 50px;
border-radius: 6px;
}
</style>
<script type="text/javascript">
function checkValue(containerId) {
const rbs = document.querySelectorAll('input[name = "radiobutton"]');
let selectedValue;
for (const rb of rbs) {
if (rb.checked) {
document.getElementById(containerId).style = "stylingForCheckedRadioButton";
}else{
document.getElementById(containerId).style = "stylingForUnCheckedRadioButton";
}
}
};
</script>
<body>
<h1>My Radio Buttons</h1>
<div class="stylingForUnCheckedRadioButton" id="container1">
<input id="radiobuttonId1" type="radio" value="radiobuttonId1" name="radiobutton" onclick="checkValue('container1')">
<label for="radiobuttonId1">Radio button 1</label>
</div>
<div class="stylingForUnCheckedRadioButton" id="container2">
<input id="radiobuttonId2" type="radio" value="radiobuttonId2" name="radiobutton" onclick="checkValue('container3')">
<label for="radiobuttonId2">Radio button 2</label>
</div>
<div class="stylingForUnCheckedRadioButton" id="container3">
<input id="radiobuttonId3" type="radio" value="radiobuttonId3" name="radiobutton" onclick="checkValue('container3')">
<label for="radiobuttonId3">Radio button 3</label>
</div>
</body>
</html>
this way...
const all_Radios = document.querySelectorAll('#container input[type=radio]');
set_Radios() // for page initialization
all_Radios.forEach( btRadio => btRadio.oninput = set_Radios )
function set_Radios()
{
all_Radios.forEach( bt =>
bt.closest('label').classList.toggle('checkedClass', bt.checked))
}
#container > label {
display : block;
color : black;
background-color : white;
border-style : groove;
border-width : thin;
border-color : #DCDCDC;
margin-bottom : 7px;
width : 10%;
height : 2em;
border-radius : 6px;
min-width : 10em;
line-height : 2em;
}
#container > label.checkedClass {
color : white;
background-color : blue;
border-style : solid;
border-color : grey;
}
<h1>My Radio Buttons</h1>
<div id="container">
<label>
<input name="radiobutton" type="radio" value="xxx" >
Radio button 1
</label>
<label>
<input name="radiobutton" type="radio" value="yyy" >
Radio button 2
</label>
<label>
<input name="radiobutton" type="radio" value="zzz" >
Radio button 3
</label>
</div>
You can use the event.target to get the parentNode of the input element to set the style using classList.replace(). Each click reset the classes of the parent elements to unchecked, then if the event.target is checked e.target.checked, replace the unchecked class with the checked class.
const rbs = document.querySelectorAll('input[name = "radiobutton"]');
// callback function setSel passing in the event from the listener
function setSel(e) {
// get parent element of the event target
let par = e.target.parentNode
// reset each input to unchecked before checking the event target
rbs.forEach(item => item.parentNode.classList.replace('stylingForCheckedRadioButton', 'stylingForUnCheckedRadioButton'))
// if the el is checked we replace the classList with
// the desired class that styles as checked
e.target.checked ?
par.classList.replace('stylingForUnCheckedRadioButton', 'stylingForCheckedRadioButton') :
null
}
// loop over the input nodeList and add event to each node
// in the list with a callback function 'setSel'
rbs.forEach(el => el.addEventListener('click', setSel))
.stylingForCheckedRadioButton {
background-color: red;
}
<!DOCTYPE html>
<html>
<style>
.stylingForCheckedRadioButton {
color: white;
background-color: blue;
border-style: solid;
border-width: thin;
border-color: grey;
margin-bottom: 7px;
width: 10%;
height: 50px;
border-radius: 6px;
}
.stylingForUnCheckedRadioButton {
color: black;
background-color: white;
border-style: groove;
border-width: thin;
border-color: #DCDCDC;
margin-bottom: 7px;
width: 10%;
height: 50px;
border-radius: 6px;
}
</style>
<script type="text/javascript">
</script>
<body>
<h1>My Radio Buttons</h1>
<div class="container stylingForUnCheckedRadioButton" id="container1">
<input id="radiobuttonId1" type="radio" value="radiobuttonId1" name="radiobutton">
<label for="radiobuttonId1">Radio button 1</label>
</div>
<div class="container stylingForUnCheckedRadioButton" id="container2">
<input id="radiobuttonId2" type="radio" value="radiobuttonId2" name="radiobutton">
<label for="radiobuttonId2">Radio button 2</label>
</div>
<div class="container stylingForUnCheckedRadioButton" id="container3">
<input id="radiobuttonId3" type="radio" value="radiobuttonId3" name="radiobutton">
<label for="radiobuttonId3">Radio button 3</label>
</div>
</body>
</html>
There are two main issues here. First, you should use the className attribute instead of style to change the element class.
Secondly, in your function, JavaScript is setting the color of the divs based on the last value in the rbs nodeList. This means that your intended div will be styled according to whether or not the last radio button is checked. To change this, query the DOM for a list of all the divs then check each div according to its corresponding radio button based on index.
function checkValue() {
const rbs = document.querySelectorAll('input[name = "radiobutton"]');
rbs.forEach((rb, i) => {
let div = document.getElementById(`container${i + 1}`);
div.className = rb.checked ? 'stylingForCheckedRadioButton' : 'stylingForUnCheckedRadioButton';
})
};
.stylingForCheckedRadioButton {
color: white;
background-color: blue;
border-style: solid;
border-width: thin;
border-color: grey;
margin-bottom: 7px;
width: 10%;
min-width: 150px;
height: 50px;
border-radius: 6px;
}
.stylingForUnCheckedRadioButton {
color: black;
background-color: white;
border-style: groove;
border-width: thin;
border-color: #DCDCDC;
margin-bottom: 7px;
width: 10%;
min-width: 150px;
height: 50px;
border-radius: 6px;
}
<!DOCTYPE html>
<html>
<body>
<h1>My Radio Buttons</h1>
<div class="stylingForUnCheckedRadioButton" id="container1">
<input id="radiobuttonId1" type="radio" value="radiobuttonId1" name="radiobutton" onclick="checkValue()">
<label for="radiobuttonId1">Radio button 1</label>
</div>
<div class="stylingForUnCheckedRadioButton" id="container2">
<input id="radiobuttonId2" type="radio" value="radiobuttonId2" name="radiobutton" onclick="checkValue()">
<label for="radiobuttonId2">Radio button 2</label>
</div>
<div class="stylingForUnCheckedRadioButton" id="container3">
<input id="radiobuttonId3" type="radio" value="radiobuttonId3" name="radiobutton" onclick="checkValue()">
<label for="radiobuttonId3">Radio button 3</label>
</div>
</body>
</html>
I recommend to read some topics on DRY.
// All the radio buttons
const radios = document.querySelectorAll('.radio')
// Function to toggle active class
function handleRadioClick(e) {
// Remove previous active class
for (let i = 0; i < radios.length; i++) {
radios[i].parentNode.classList.remove('active')
}
// Add current active class to parent container
e.target.parentNode.classList.add('active')
}
// Listen for the click event on radios
for (let i = 0; i < radios.length; i++) {
radios[i].addEventListener('click', handleRadioClick, false);
}
.container {
color: black;
background-color: white;
border-style: groove;
border-width: thin;
border-color: #DCDCDC;
margin-bottom: 7px;
width: 10%;
height: 50px;
border-radius: 6px;
}
.container.active {
color: white;
background-color: blue;
border-style: solid;
border-width: thin;
border-color: grey;
margin-bottom: 7px;
width: 10%;
height: 50px;
border-radius: 6px;
}
<div class="container">
<input class="radio" id="btn1" type="radio" value="btn1" name="radio">
<label for="btn1">Radio button 1</label>
</div>
<div class="container">
<input class="radio" id="btn2" type="radio" value="btn2" name="radio">
<label for="btn2">Radio button 2</label>
</div>
<div class="container">
<input class="radio" id="btn3" type="radio" value="btn3" name="radio">
<label for="btn3">Radio button 3</label>
</div>

Is it possible to display a tooltip only when hovered over a checked radio button using jQuery

I want to display the tooltip only when I hover over a checked radio button.
When hovered on the radio button I'm trying to check
$(this).is(':checked') == true
But the tooltip is displayed only when hovered on "Yes". What am I doing wrong here?.
Any suggestions are highly appreciated. Thanks in advance. :)
$("input[name^='radioBtn']").hover(function () {
if(($(this).is(':checked')) == true){
var text= "Hello";
$(".displayContents").append(text);
}
});
.radioHover:hover ~ .displayContents{
visibility: visible;
}
.displayContents{
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn radioHover" value="true" id="radioYes" class="radioBtn radioHover"/><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn radioHover" value="true" id="radioNo" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>
It is not necessary to use jQuery to achieve your desired goal. It is enough to aim the :hover pseudo-class at the :checked pseudo-class, in the css. Like this:
.radioHover:checked:hover ~ .displayContents {
visibility: visible;
}
For unique content of each radio button, use id #radioYes and #radioNo with operator ~.
$("#radioYes ~ .displayContents").text("Hello Yes");
$("#radioNo ~ .displayContents").text("Hello No");
.radioHover:checked:hover ~ .displayContents {
visibility: visible;
}
.displayContents {
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioNo" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>
First of all, you put radioHover into name attribute.
Anyway, you should set radioHover class on the checked button only, like so:
$("input[name='radioBtn']").hover(function () {
this.classList.toggle("radioHover", this.checked);
if($(this).is(':checked') == true){
var text= "Hello";
$(".displayContents").append(text);
}
});
.radioHover:hover ~ .displayContents{
visibility: visible;
}
.displayContents{
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="false" id="radioNo" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>
You had some typos and some misunderstandings. The radioHover class was in the name field, was missing in the class for the 'no' radio. Additionally, you have 2 different . displayContents elements. The way to target the one associated with the radio is via the .closest(selector).find(selector) combo. I didn't think you wanted to actually append the same HTML continuously, so I changed that to .html().
Finally, I added the 'change' event in the mix - that way you'll get your value on hover and on click (if checked). Reason being, you are hovering over the element when you click it. Yet the hover didn't update when the state went from not-checked to checked. Now it does
$("input[name='radioBtn']").on('hover, change', function() {
if ($(this).is(':checked')) {
$(this).closest('div').find(".displayContents").html('Hello from ' + $(this).val());
}
});
.radioHover:checked:hover~.displayContents {
visibility: visible;
}
.displayContents {
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="yes" id="radioYes" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="no" id="radioNo" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>

how to make less space between all button using css

what i am trying to do is when i click on check box then div is display horizontal.
but in my below code when i click on checkbox then div is showing div is vertically.
but i try to make when i click on checkbox then div is show horizontally.
how can we do that using CSS
is there any help.
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
.selectt {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width:20%;
}
label {
margin-right: 15px;
}
.d-flex-wrapper {
display: flex;
}
.d-flex-wrapper > div{
margin-right:5px;
}
.d-flex-wrapper > div:last-chid{
margin-right:30px;
}
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div>
<label>
<input type="checkbox" name="colorCheckbox"
value="C"> C</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Cplus"> C++</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Python"> Python</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Java"> Java</label>
</div>
<div class="d-flex-wrapper"> <!-- Added New div start here -->
<div class="C selectt">
<button class="button button2">Blue</button>
</div>
<div class="Cplus selectt">
<button class="button button2">Blue</button>
</div>
<div class="Python selectt">
<button class="button button2">Blue</button></div>
<div class="Java selectt">
<button class="button button2">Blue</button></div> <!-- Added New div end's here -->
</div>
You Can use- Display Flex
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
.selectt {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width:20%;
background: green
}
label {
margin-right: 20px;
}
.d-flex-wrapper {
display: flex;
}
.d-flex-wrapper > div{
margin-right:20px;
}
.d-flex-wrapper > div:last-chid{
margin-right:0px;
}
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div>
<label>
<input type="checkbox" name="colorCheckbox"
value="C"> C</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Cplus"> C++</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Python"> Python</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Java"> Java</label>
</div>
<div class="d-flex-wrapper"> <!-- Added New div start here -->
<div class="C selectt">
<strong>C</strong>
is a procedural programming language
</div>
<div class="Cplus selectt">
<strong>C++</strong>
is a general purpose programming language</div>
<div class="Python selectt">
<strong>Python</strong>
is a widely used general-purpose, high level
programming language.</div>
<div class="Java selectt">
<strong>Java</strong>
is a most popular programming language
for many years.</div> <!-- Added New div end's here -->
</div>
I Hope it's Help You :)
Thanks
wrap the green boxes inside a div with the css property and value: display: flex;
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
.selectt {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width: 20%;
background: green
}
label {
margin-right: 20px;
}
/* Added for the wrapper */
.flex-wrap {
display: flex;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div>
<label>
<input type="checkbox" name="colorCheckbox" value="C"> C</label>
<label>
<input type="checkbox" name="colorCheckbox" value="Cplus"> C++</label>
<label>
<input type="checkbox" name="colorCheckbox" value="Python"> Python</label>
<label>
<input type="checkbox" name="colorCheckbox" value="Java"> Java</label>
</div>
<div class="flex-wrap"> <!-- Added opening div -->
<div class="C selectt">
<strong>C</strong> is a procedural programming language
</div>
<div class="Cplus selectt">
<strong>C++</strong> is a general purpose programming language</div>
<div class="Python selectt">
<strong>Python</strong> is a widely used general-purpose, high level programming language.</div>
<div class="Java selectt">
<strong>Java</strong> is a most popular programming language for many years.</div>
</div> <!-- Added closing div -->

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;

How to validate RadioButton options?

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

Categories