Learning how to build an array list that regenerates - javascript

Looking to build a multiple choice test that when a button is clicked for answering question, the next questions and answers load - been looking at local storage and ran a debug with console that gave me the following error msg " Uncaught TypeError: Cannot read property 'addEventListener' of null" first time coder so any help would be greatly appreciated - thank you
// Questions + Answers from local storage//
var testquestions = document.getElementById("question");
var testanswers = document.getElementById("answer");
var comment = document.getElementById("msg");
var saveButton = document.getElementById("save");
var savedAnswer = document.getElementById("savedAnswer");
function saveLastAnswer() {
var testResult = {
testquestions: questions.value,
testanswers: answers.value,
comment: comment.value.trim()
};
// setItem to store oject in storage and JSON.stringfy to convert it as a string.//
localStorage.setItem("testResult",JSON.stringify(testResult));
}
function renderLastAnswer () {
//Use JSON.parse to covert text to Javascript object
var lastAnswer = JSON.parse(localStorage.getItem("testResult"));
//Check if data returned is correct or in correct//
if (lastAnswer !== null){
document.getElementById("savedAnswer"). innerHTML = lastAnswer.answer;
} else {
return;
}
}
saveButton.addEventListener("click", function(event){
event.preventDefault();
saveLastAnswer();
renderLastAnswer();
});
//Init function //
function init () {
renderLastAnswer();
}
init ();
HTML -
<!DOCTYPE html>
<html lang="en"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css"/>
<script src="./main.js"></script>
</head>
<body>
<div class="countdwnclock">Seconds left:<span id ="time-left"> 60</span></div>
<div class="container"></div>
<!--Questions 1-->
var = question1
<div class="copy">"Commonly used data types DO NOT include:"</div>
<ul class="answers" id="question1">
<input type = "radio" name="q1" value = "a" id="q1a">1.strings</label>
</ul>
<ul>
<input type = "radio" name="q1" value = "b" id="q1b">2.booleans</label>
</ul>
<ul>
<input type = "radio" name="q1" value = "c" id="q1c">2.booleans</label>
</ul>
<ul>
<input type = "radio" name="q1" value = "d" id="q1d">3.alerts</label>
</ul>
<!--Quesions 2-->
<div class="container"></div>
<div class="copy">The condition in an if/else statement is enclosed within____.</div>
<ul class="answers" id="question2">
<input type="radio" name="q2" value="a" id="q2a">1.quotes</label>
</ul>
<ul>
<input type="radio" name="q2" value="b" id="q2b">2.curly brackets</label>
</ul>
<ul>
<input type="radio" name="q2" value="a" id="q2c">3.parenthesis</label>
</ul>
<ul>
<input type="radio" name="q2" value="c" id="q2d">4.square brackets</label>
</ul>
<!--Question 3-->
<div class="container"></div>
<div class="copy">Arrays in Javascript can be used to store____.</div>
<ul class="answers" id="question3">
<input type="radio" name="q3" value="a" id="q3a">1.numbers & strings</label>
</ul>
<ul>
<input type="radio" name="q3" value="b" id="q3b">2.other arrays</label>
</ul>
<ul>
<input type="radio" name="q3" value="a" id="q3c">3.booleans</label>
</ul>
<ul>
<input type="radio" name="q3" value="c" id="q3d">4.all the above</label>
</ul>
<!--Question 4-->
<div class="container"></div>
<div class="copy">String values must be enclosed within______when being assigned to variables.</div>
<ul class="answers" id="question4">
<input type="radio" name="q4" value="a" id="q4a">1.commas</label>
</ul>
<ul>
<input type="radio" name="q4" value="b" id="q4b">2.curly brackets</label>
</ul>
<ul>
<input type="radio" name="q4" value="a" id="q4c">3.quotes</label>
</ul>
<ul>
<input type="radio" name="q4" value="c" id="q4d">4.parenthesis</label>
</ul>
<!--Question 5-->
<div class="container"></div>
<div class="copy">A very useful tool used during development and debugging for printing content to the debugger is____.</div>
<ul class="answers" id="question4">
<input type="radio" name="q5" value="a" id="q5a">1.Javascript</label>
</ul>
<ul>
<input type="radio" name="q5" value="b" id="q5b">2.terminal/bash</label>
</ul>
<ul>
<input type="radio" name="q5" value="a" id="q5c">3.for loops</label>
</ul>
<ul>
<input type="radio" name="q5" value="c" id="q5d">4.console log</label>
</ul>
</body>
</html>
/**** CSS STYLES ***/
.text{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: x-large;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 100px;
text-align: center;
color: black;
}
.copy {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
position: relative;
color: black;
text-align: center;
font-weight: bold;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.container {
height: 200px;
position: relative;
border: none;
}
/****Questions****/
.questions{
margin: 5px;
font-size: 18px;
cursor: pointer;
text-decoration: none;
outline: none;
color: #fff;
background-color: purple;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin-right: 200px;
margin-left: 200px;
}
/***Buttons***/
.button:hover {background-color: purple;
transform: scale(1.1);
}
.button:active {
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.start{
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
position: relative;
text-decoration: none;
outline: none;
color: #fff;
background-color: purple;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: purple;}
.button:active {
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/***Unordered lists***/
ul{
list-style-type: none;
margin-left: 40%;
padding: 5px 5px;
font-size: 24px;
cursor: pointer;
position: relative;
text-decoration: none;
outline: none;
color: #fff;
background-color: purple;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
width: 200px;
}
input{
visibility: hidden;
}
.wrapper{
height: 200px;
position: relative;
border: none;
}
.countdwnclock{
position: absolute;
left: 1000px;
border: none;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}

Related

loop through an array of input names and sum the values of any radio buttons which are checked

I need to loop through an array of input names and sum the values of any radio buttons which are checked. I can get it to output a single group but am struggling to handle multiple groups values pulling back.
I used 'document.querySelector('input[name="star1"]:checked').value' to pull back a single value and output it. This worked fine but when i tried to implement it for 4 more additional groups I was getting error after error.
I decided to put the names of the groups into an array so i could loop through all 5 groups. I need it to ignore groups that have no radio button checked to avoid any null value errors.
EDITED: #Zer00ne - I have modified my snippet to show my actual layout.
:root {
--primary: #0162a4;
--primary_med: #5084a7;
--primary_dark: #113255;
--light: #ffffff;
--dark: #000000;
--shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
--shadow-white: 0px 11px 8px -10px rgba(255, 255, 255, 0.678), 0px -11px 8px -10px rgba(255, 255, 255, 0.678);
--overlay: rgb(255, 255, 255, 0.15);
--overlay-blk: rgba(0, 0, 0, 0.15);
--gradient: linear-gradient(to bottom right, #113255, #0162a4);
}
#font-face {
font-family: 'walkway';
src: url('/static/fonts/Walkway_Bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'walkway';
src: url('/static/fonts/Walkway_Black-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
.wrapper {
max-width: 1058px;
margin: auto;
/*-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;*/
}
.feedback {
box-sizing: border-box;
padding-top: 10px;
font-size: 12px;
border-radius: 10px;
background-image: var(--gradient);
border: 1px solid #000000;
box-shadow: 2px 4px 8px;
gap: 10px;
display: grid;
grid-template-areas: 'feedMain';
grid-template-columns: 513px;
grid-template-rows: 375px;
width: 534px;
}
.container {
grid-area: feedMain;
}
.container {
padding-left: 10px;
width: 472px;
}
.tabs {
position: relative;
margin: 0;
}
.tabs::before,
.tabs::after {
content: "";
display: table;
}
.tabs::after {
clear: both;
}
.tab {
width: 110px;
float: left;
padding-right: 6px;
Padding-top: 1px;
}
.tab-switch {
display: none;
}
.tab-label {
font-family: 'walkway';
font-weight: bold;
position: relative;
display: block;
height: 32px;
text-align: center;
background: var(--primary_dark);
color: #fff;
cursor: pointer;
padding: 5px;
font-size: 14px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.tab-switch:checked+.tab-label {
color: var(--light);
border-bottom: 0;
z-index: 2;
top: -0.0625rem;
font-size: 16px;
font-weight: 700;
}
.tab:first-child .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(59, 81, 110), rgb(62, 84, 117));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:nth-child(2) .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(64, 91, 122), rgb(63, 88, 123));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:nth-child(3) .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(61, 91, 127), rgb(64, 92, 128));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:last-child .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(61, 94, 132), rgb(66, 96, 135));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab-switch:checked+.tab-label+.tab-content {
z-index: 1;
opacity: 1;
}
.tab:not(:first-child) .tab-switch:checked+.tab-label+.tab-content {
border-top-left-radius: 8px;
}
.tab-content {
height: 12rem;
position: absolute;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border: 1px solid;
border-color: #6386b6;
z-index: 0;
top: 31px;
left: 0;
background-image: linear-gradient(to bottom right, rgb(58, 82, 112), rgb(65, 117, 167));
opacity: 0;
height: 300px;
width: 100%;
padding: 20px;
gap: 20px;
}
.rate-form {
display: grid;
gap: 20px;
grid-template-areas: 'question-1 rating1' 'question-2 rating2' 'question-3 rating3' 'question-4 rating4' 'question-5 rating5';
grid-template-columns: 305px 1fr;
grid-template-rows: 44.6px 44.6px 44.6px 44.6px 44.6px;
}
.question-1 {
grid-area: question-1;
}
.question-2 {
grid-area: question-2;
}
.question-3 {
grid-area: question-3;
}
.question-4 {
grid-area: question-4;
}
.question-5 {
grid-area: question-5;
}
.rating1 {
grid-area: rating1;
}
.rating2 {
grid-area: rating2;
}
.rating3 {
grid-area: rating3;
}
.rating4 {
grid-area: rating4;
}
.rating5 {
grid-area: rating5;
}
.question-1,
.question-2,
.question-3,
.question-4,
.question-5 {
background-color: rgb(255, 255, 255, 0.85);
border-radius: 25px;
border: 1px solid;
border-color: rgb(0, 0, 0);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-family: 'walkway';
font-weight: bold;
text-align: center;
}
.rating1,
.rating2,
.rating3,
.rating4,
.rating5 {
justify-content: left;
align-items: center;
margin: 0;
padding: 0;
height: 44.6px;
width: 140px;
}
.rating1 input,
.rating2 input,
.rating3 input,
.rating4 input,
.rating5 input {
display: none;
}
.rating1 label,
.rating2 label,
.rating3 label,
.rating4 label,
.rating5 label {
float: right;
font-size: 30px;
color: lightgrey;
margin: 0 1px;
text-shadow: 1px 1px #bbb;
}
.rating1 label:before,
.rating2 label:before,
.rating3 label:before,
.rating4 label:before,
.rating5 label:before {
content: '★';
}
.rating1 input:checked~label,
.rating2 input:checked~label,
.rating3 input:checked~label,
.rating4 input:checked~label,
.rating5 input:checked~label {
color: #de4323;
text-shadow: 1px 1px #2e2e2e;
}
.score-submit {
display: flex;
background: var(--primary_dark);
align-items: center;
width: 518px;
height: 70px;
padding: 8px;
}
.send-button {
font-family: 'walkway';
font-weight: bold;
background-color: var(--light);
border: 1px solid;
border-color: #000;
color: #000;
padding: 12px 15px;
font-size: 20px;
font-weight: 700;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}
.time {
font-family: 'walkway';
position: relative;
color: var(--light);
align-items: center;
padding-left: 10px;
padding-top: 10px;
width: 310px;
height: 50px;
text-align: center;
}
.remain,
.countdown {
align-items: center;
vertical-align: middle;
padding: 0;
margin: 0;
font-size: 20px;
height: 20px;
}
.countdown {
padding-top: 5px;
}
.star-score {
margin: 0;
padding-right: 10;
text-align: left;
}
.star-text {
font-size: 30px;
font-family: 'walkway';
font-weight: bold;
color: rgb(255, 255, 255);
}
<div class="feedback">
<div class="container">
<div class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Tab1</label>
<div class="tab-content">
<form class="rate-form" type="text">
<div class="question-1">
<h4>Question 1</h4>
</div>
<div class="question-2">
<h4>Question 2</h4>
</div>
<div class="question-3">
<h4>Question 3</h4>
</div>
<div class="question-4">
<h4>Question 4</h4>
</div>
<div class="question-5">
<h4>Question 5</h4>
</div>
<div class="rating1">
<input type="radio" name="star1" id="rad-5" value="5"><label for="rad-5">
</label>
<input type="radio" name="star1" id="rad-4" value="4"><label for="rad-4">
</label>
<input type="radio" name="star1" id="rad-3" value="3"><label for="rad-3">
</label>
<input type="radio" name="star1" id="rad-2" value="2"><label for="rad-2">
</label>
<input type="radio" name="star1" id="rad-1" value="1"><label for="rad-1">
</label>
</div>
<div class="rating2">
<input type="radio" name="star2" id="rad-6" value="5"><label for="rad-6">
</label>
<input type="radio" name="star2" id="rad-7" value="4"><label for="rad-7">
</label>
<input type="radio" name="star2" id="rad-8" value="3"><label for="rad-8">
</label>
<input type="radio" name="star2" id="rad-9" value="2"><label for="rad-9">
</label>
<input type="radio" name="star2" id="rad-10" value="1"><label for="rad-10">
</label>
</div>
<div class="rating3">
<input type="radio" name="star3" id="rad-11" value="5"><label for="rad-11">
</label>
<input type="radio" name="star3" id="rad-12" value="4"><label for="rad-12">
</label>
<input type="radio" name="star3" id="rad-13" value="3"><label for="rad-13">
</label>
<input type="radio" name="star3" id="rad-14" value="2"><label for="rad-14">
</label>
<input type="radio" name="star3" id="rad-15" value="1"><label for="rad-15">
</label>
</div>
<div class="rating4">
<input type="radio" name="star4" id="rad-16" value="5"><label for="rad-16">
</label>
<input type="radio" name="star4" id="rad-17" value="4"><label for="rad-17">
</label>
<input type="radio" name="star4" id="rad-18" value="3"><label for="rad-18">
</label>
<input type="radio" name="star4" id="rad-19" value="2"><label for="rad-19">
</label>
<input type="radio" name="star4" id="rad-20" value="1"><label for="rad-20">
</label>
</div>
<div class="rating5">
<input type="radio" name="star5" id="rad-21" value="5"><label for="rad-21">
</label>
<input type="radio" name="star5" id="rad-22" value="4"><label for="rad-22">
</label>
<input type="radio" name="star5" id="rad-23" value="3"><label for="rad-23">
</label>
<input type="radio" name="star5" id="rad-24" value="2"><label for="rad-24">
</label>
<input type="radio" name="star5" id="rad-25" value="1"><label for="rad-25">
</label>
</div>
</form>
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Tab2</label>
<div class="tab-content"> </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
<label for="tab-3" class="tab-label">Tab3</label>
<div class="tab-content"> </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
<label for="tab-4" class="tab-label">Tab4</label>
<div class="tab-content"> </div>
</div>
</div>
</div>
<div class="score-submit">
<button class="send-button" onclick="submit()">Send it</button>
<div class="time">
<p class="remain">Time Remaining</p>
<p class="countdown">00:00</p>
</div>
<div class="star-score">
<p class="star-text" id="star-text">0/25</p>
</div>
</div>
</div>

Update
Adapting Example B was trivial,
The JavaScript is the same as Example A.
Added id="rankings" to <form> as it was in Example A
Changed the <p> back to a <output> as it was in Example A
The only thing that's actually different is assigning <output> form="ratings" since it isn't in the <form>.
HTMLFormElement and HTMLFormControlsCollection interfaces are used to reference <form> and form controls.
// Reference a <form> with id (or name) "ratings"
const ratings = document.forms.ratings;
/*
Reference a form control inside of <form> with the id/name of "total". Assign it's value
as two spaces.
*/
ratings.total.value = "\u00A0\u00A0";
Don't use inline event handlers use onevent properties or event listeners, here's an onevent property:
/*
Bind "input" event to <form> invoke scoreCount(e) when "input" event is
triggered on or within <form>. If any radio button is clicked, scoreCount(e)
runs. A single line for an unlimited number of form controls. Don't waste your
time typing: onclick="scoreCount(value, name)" 25 times.
*/
ratings.oninput = scoreCount;
Events can bubble from one tag to it's parent and so on making this possible. Indirectly controlling many tags by listening for events with an ancestor tag and excluding and including tags in the event handler is called event delegation. Here's an event handler:
/*
All event handlers pass the Event Object by default. It isn't being used this
time. Instead, "this" is being used which points to the tag bound to the event
which is <form>.
*/
function scoreCount(e) {
// Reference all form controls within <form>
const IO = this.elements;
let score =
/*
NodeList of all .checked tags within <form> converted into an array. The
output will be coerced into a string (''+)
*/
'' + [...this.querySelectorAll(':checked')]
/*
On each iteration get the .checked tag's value and coerce it into a (+)
number. Add that number to the accumulator (sum) (initial value is 0.
*/
.reduce(
(sum, chk) => sum + (+chk.value), 0);
/*
Take the output from the previous process and display it in <output>. The
.padStart() keeps a space before the value so there isn't any shifting.
*/
IO.total.value = score.padStart(2, "\u00A0");
}
Example A
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
html {
font: 300 2ch/1.25 'Segoe UI'
}
ol {
padding-left: 20px;
}
li {
margin-top: 8px;
}
li::marker {
font-size: 1.1rem;
}
p {
margin-bottom: 8px;
font-size: 1.1rem;
}
fieldset {
display: flex;
justify-content: space-evenly;
align-items: center;
}
fieldset label:first-of-type {
order: 5
}
fieldset label:nth-of-type(2) {
order: 4
}
fieldset label:nth-of-type(3) {
order: 3
}
fieldset label:nth-of-type(4) {
order: 2
}
fieldset label:last-of-type {
order: 1
}
label {
display: inline-block;
font-size: 2rem;
text-shadow: -1px -1px 1px rgba(255, 255, 255, .1),
1px 1px 1px rgba(0, 0, 0, .5),
2px -9px 2px rgba(221, 231, 255, 0);
color: #d9d9d9;
transition: 0.7s;
cursor: pointer;
}
input {
display: none;
}
input:checked~label {
text-shadow: 2px 1px 0px #7A7A7A;
color: #FFF900;
transition: 0.7s
}
#total {
display: block;
font-family: Consolas;
font-size: 1.25rem;
}
#total::before {
content: 'Rating: ';
font-family: 'Segoe UI';
}
#total::after {
content: '/25'
}
</style>
</head>
<body>
<form id='ratings'>
<ol>
<li>
<p>Question 1</p>
<fieldset name="rating">
<input id="rad-5" name="star1" type="radio" value="5">
<label for="rad-5">★</label>
<input id="rad-4" name="star1" type="radio" value="4">
<label for="rad-4">★</label>
<input id="rad-3" name="star1" type="radio" value="3">
<label for="rad-3">★</label>
<input id="rad-2" name="star1" type="radio" value="2">
<label for="rad-2">★</label>
<input id="rad-1" name="star1" type="radio" value="1">
<label for="rad-1">★</label>
</fieldset>
</li>
<li>
<p>Question 2</p>
<fieldset name="rating">
<input id="rad-10" name="star2" type="radio" value="5">
<label for="rad-10">★</label>
<input id="rad-9" name="star2" type="radio" value="4">
<label for="rad-9">★</label>
<input id="rad-8" name="star2" type="radio" value="3">
<label for="rad-8">★</label>
<input id="rad-7" name="star2" type="radio" value="2">
<label for="rad-7">★</label>
<input id="rad-6" name="star2" type="radio" value="1">
<label for="rad-6">★</label>
</fieldset>
</li>
<li>
<p>Question 3</p>
<fieldset name="rating">
<input id="rad-15" name="star3" type="radio" value="5">
<label for="rad-15">★</label>
<input id="rad-14" name="star3" type="radio" value="4">
<label for="rad-14">★</label>
<input id="rad-13" name="star3" type="radio" value="3">
<label for="rad-13">★</label>
<input id="rad-12" name="star3" type="radio" value="2">
<label for="rad-12">★</label>
<input id="rad-11" name="star3" type="radio" value="1">
<label for="rad-11">★</label>
</fieldset>
</li>
<li>
<p>Question 4</p>
<fieldset name="rating">
<input id="rad-20" name="star4" type="radio" value="5">
<label for="rad-20">★</label>
<input id="rad-19" name="star4" type="radio" value="4">
<label for="rad-19">★</label>
<input id="rad-18" name="star4" type="radio" value="3">
<label for="rad-18">★</label>
<input id="rad-17" name="star4" type="radio" value="2">
<label for="rad-17">★</label>
<input id="rad-16" name="star4" type="radio" value="1">
<label for="rad-16">★</label>
</fieldset>
<li>
<p>Question 5</p>
<fieldset name="rating">
<input id="rad-25" name="star5" type="radio" value="5">
<label for="rad-25">★</label>
<input id="rad-24" name="star5" type="radio" value="4">
<label for="rad-24">★</label>
<input id="rad-23" name="star5" type="radio" value="3">
<label for="rad-23">★</label>
<input id="rad-22" name="star5" type="radio" value="2">
<label for="rad-22">★</label>
<input id="rad-21" name="star5" type="radio" value="1">
<label for="rad-21">★</label>
</fieldset>
</li>
</ol>
<fieldset>
<output id='total'></output>
</fieldset>
</form>
<script>
const ratings = document.forms.ratings;
ratings.oninput = scoreCount;
ratings.total.value = "\u00A0\u00A0";
function scoreCount(e) {
const IO = this.elements;
let score =
'' + [...this.querySelectorAll(':checked')]
.reduce(
(sum, chk) => sum + (+chk.value), 0);
IO.total.value = score.padStart(2, "\u00A0");
}
</script>
</body>
</html>
Example B
const ratings = document.forms.ratings;
ratings.oninput = scoreCount;
ratings.total.value = "\u00A0\u00A0";
function scoreCount(e) {
const IO = this.elements;
let score =
'' + [...this.querySelectorAll(':checked')]
.reduce(
(sum, chk) => sum + (+chk.value), 0);
IO.total.value = score.padStart(2, "\u00A0");
}
:root {
--primary: #0162a4;
--primary_med: #5084a7;
--primary_dark: #113255;
--light: #ffffff;
--dark: #000000;
--shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
--shadow-white: 0px 11px 8px -10px rgba(255, 255, 255, 0.678), 0px -11px 8px -10px rgba(255, 255, 255, 0.678);
--overlay: rgb(255, 255, 255, 0.15);
--overlay-blk: rgba(0, 0, 0, 0.15);
--gradient: linear-gradient(to bottom right, #113255, #0162a4);
}
#font-face {
font-family: 'walkway';
src: url('/static/fonts/Walkway_Bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'walkway';
src: url('/static/fonts/Walkway_Black-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
.wrapper {
max-width: 1058px;
margin: auto;
/*-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;*/
}
.feedback {
box-sizing: border-box;
padding-top: 10px;
font-size: 12px;
border-radius: 10px;
background-image: var(--gradient);
border: 1px solid #000000;
box-shadow: 2px 4px 8px;
gap: 10px;
display: grid;
grid-template-areas: 'feedMain';
grid-template-columns: 513px;
grid-template-rows: 375px;
width: 534px;
}
.container {
grid-area: feedMain;
}
.container {
padding-left: 10px;
width: 472px;
}
.tabs {
position: relative;
margin: 0;
}
.tabs::before,
.tabs::after {
content: "";
display: table;
}
.tabs::after {
clear: both;
}
.tab {
width: 110px;
float: left;
padding-right: 6px;
Padding-top: 1px;
}
.tab-switch {
display: none;
}
.tab-label {
font-family: 'walkway';
font-weight: bold;
position: relative;
display: block;
height: 32px;
text-align: center;
background: var(--primary_dark);
color: #fff;
cursor: pointer;
padding: 5px;
font-size: 14px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.tab-switch:checked+.tab-label {
color: var(--light);
border-bottom: 0;
z-index: 2;
top: -0.0625rem;
font-size: 16px;
font-weight: 700;
}
.tab:first-child .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(59, 81, 110), rgb(62, 84, 117));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:nth-child(2) .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(64, 91, 122), rgb(63, 88, 123));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:nth-child(3) .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(61, 91, 127), rgb(64, 92, 128));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:last-child .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(61, 94, 132), rgb(66, 96, 135));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab-switch:checked+.tab-label+.tab-content {
z-index: 1;
opacity: 1;
}
.tab:not(:first-child) .tab-switch:checked+.tab-label+.tab-content {
border-top-left-radius: 8px;
}
.tab-content {
height: 12rem;
position: absolute;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border: 1px solid;
border-color: #6386b6;
z-index: 0;
top: 31px;
left: 0;
background-image: linear-gradient(to bottom right, rgb(58, 82, 112), rgb(65, 117, 167));
opacity: 0;
height: 300px;
width: 100%;
padding: 20px;
gap: 20px;
}
.rate-form {
display: grid;
gap: 20px;
grid-template-areas: 'question-1 rating1' 'question-2 rating2' 'question-3 rating3' 'question-4 rating4' 'question-5 rating5';
grid-template-columns: 305px 1fr;
grid-template-rows: 44.6px 44.6px 44.6px 44.6px 44.6px;
}
.question-1 {
grid-area: question-1;
}
.question-2 {
grid-area: question-2;
}
.question-3 {
grid-area: question-3;
}
.question-4 {
grid-area: question-4;
}
.question-5 {
grid-area: question-5;
}
.rating1 {
grid-area: rating1;
}
.rating2 {
grid-area: rating2;
}
.rating3 {
grid-area: rating3;
}
.rating4 {
grid-area: rating4;
}
.rating5 {
grid-area: rating5;
}
.question-1,
.question-2,
.question-3,
.question-4,
.question-5 {
background-color: rgb(255, 255, 255, 0.85);
border-radius: 25px;
border: 1px solid;
border-color: rgb(0, 0, 0);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-family: 'walkway';
font-weight: bold;
text-align: center;
}
.rating1,
.rating2,
.rating3,
.rating4,
.rating5 {
justify-content: left;
align-items: center;
margin: 0;
padding: 0;
height: 44.6px;
width: 140px;
}
.rating1 input,
.rating2 input,
.rating3 input,
.rating4 input,
.rating5 input {
display: none;
}
.rating1 label,
.rating2 label,
.rating3 label,
.rating4 label,
.rating5 label {
float: right;
font-size: 30px;
color: lightgrey;
margin: 0 1px;
text-shadow: 1px 1px #bbb;
}
.rating1 label:before,
.rating2 label:before,
.rating3 label:before,
.rating4 label:before,
.rating5 label:before {
content: '★';
}
.rating1 input:checked~label,
.rating2 input:checked~label,
.rating3 input:checked~label,
.rating4 input:checked~label,
.rating5 input:checked~label {
color: #de4323;
text-shadow: 1px 1px #2e2e2e;
}
.score-submit {
display: flex;
background: var(--primary_dark);
align-items: center;
width: 518px;
height: 70px;
padding: 8px;
}
.send-button {
font-family: 'walkway';
font-weight: bold;
background-color: var(--light);
border: 1px solid;
border-color: #000;
color: #000;
padding: 12px 15px;
font-size: 20px;
font-weight: 700;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}
.time {
font-family: 'walkway';
position: relative;
color: var(--light);
align-items: center;
padding-left: 10px;
padding-top: 10px;
width: 310px;
height: 50px;
text-align: center;
}
.remain,
.countdown {
align-items: center;
vertical-align: middle;
padding: 0;
margin: 0;
font-size: 20px;
height: 20px;
}
.countdown {
padding-top: 5px;
}
.star-score {
margin: 0;
padding-right: 10;
text-align: left;
}
.star-text {
font-size: 30px;
font-family: 'walkway';
font-weight: bold;
color: rgb(255, 255, 255);
}
#total::after {content: '/25'}
<div class="feedback">
<div class="container">
<div class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Tab1</label>
<div class="tab-content">
<form id='ratings' class="rate-form">
<div class="question-1">
<h4>Question 1</h4>
</div>
<div class="question-2">
<h4>Question 2</h4>
</div>
<div class="question-3">
<h4>Question 3</h4>
</div>
<div class="question-4">
<h4>Question 4</h4>
</div>
<div class="question-5">
<h4>Question 5</h4>
</div>
<div class="rating1">
<input type="radio" name="star1" id="rad-5" value="5"><label for="rad-5">
</label>
<input type="radio" name="star1" id="rad-4" value="4"><label for="rad-4">
</label>
<input type="radio" name="star1" id="rad-3" value="3"><label for="rad-3">
</label>
<input type="radio" name="star1" id="rad-2" value="2"><label for="rad-2">
</label>
<input type="radio" name="star1" id="rad-1" value="1"><label for="rad-1">
</label>
</div>
<div class="rating2">
<input type="radio" name="star2" id="rad-6" value="5"><label for="rad-6">
</label>
<input type="radio" name="star2" id="rad-7" value="4"><label for="rad-7">
</label>
<input type="radio" name="star2" id="rad-8" value="3"><label for="rad-8">
</label>
<input type="radio" name="star2" id="rad-9" value="2"><label for="rad-9">
</label>
<input type="radio" name="star2" id="rad-10" value="1"><label for="rad-10">
</label>
</div>
<div class="rating3">
<input type="radio" name="star3" id="rad-11" value="5"><label for="rad-11">
</label>
<input type="radio" name="star3" id="rad-12" value="4"><label for="rad-12">
</label>
<input type="radio" name="star3" id="rad-13" value="3"><label for="rad-13">
</label>
<input type="radio" name="star3" id="rad-14" value="2"><label for="rad-14">
</label>
<input type="radio" name="star3" id="rad-15" value="1"><label for="rad-15">
</label>
</div>
<div class="rating4">
<input type="radio" name="star4" id="rad-16" value="5"><label for="rad-16">
</label>
<input type="radio" name="star4" id="rad-17" value="4"><label for="rad-17">
</label>
<input type="radio" name="star4" id="rad-18" value="3"><label for="rad-18">
</label>
<input type="radio" name="star4" id="rad-19" value="2"><label for="rad-19">
</label>
<input type="radio" name="star4" id="rad-20" value="1"><label for="rad-20">
</label>
</div>
<div class="rating5">
<input type="radio" name="star5" id="rad-21" value="5"><label for="rad-21">
</label>
<input type="radio" name="star5" id="rad-22" value="4"><label for="rad-22">
</label>
<input type="radio" name="star5" id="rad-23" value="3"><label for="rad-23">
</label>
<input type="radio" name="star5" id="rad-24" value="2"><label for="rad-24">
</label>
<input type="radio" name="star5" id="rad-25" value="1"><label for="rad-25">
</label>
</div>
</form>
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Tab2</label>
<div class="tab-content"> </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
<label for="tab-3" class="tab-label">Tab3</label>
<div class="tab-content"> </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
<label for="tab-4" class="tab-label">Tab4</label>
<div class="tab-content"> </div>
</div>
</div>
</div>
<div class="score-submit">
<button class="send-button" onclick="submit()">Send it</button>
<div class="time">
<p class="remain">Time Remaining</p>
<p class="countdown">00:00</p>
</div>
<div class="star-score">
<output class="star-text" id="total" form='ratings'></output>
</div>
</div>
</div>

The reason why you are getting an error with the loop you are using is because whenever u click a button, it will try to get the value of all buttons (which are not clicked yet at that time).
An easier way to do this, would be to just pass the value of the button in the onclick event. I added this in the html. I also passed the name to make sure only 1 score counts per question.
<form class="rate-form" type="text">
<div class="question-1">
<h4>Question 1</h4>
</div>
<div class="question-2">
<h4>Question 2</h4>
</div>
<div class="question-3">
<h4>Question 3</h4>
</div>
<div class="question-4">
<h4>Question 4</h4>
</div>
<div class="question-5">
<h4>Question 5</h4>
</div>
<div class="rating1">
<input type="radio" name="star1" id="rad-5" value="5" onclick="scoreCount(value, name)"><label for="rad-5">
</label>
<input type="radio" name="star1" id="rad-4" value="4" onclick="scoreCount(value, name)"><label for="rad-4">
</label>
<input type="radio" name="star1" id="rad-3" value="3" onclick="scoreCount(value, name)"><label for="rad-3">
</label>
<input type="radio" name="star1" id="rad-2" value="2" onclick="scoreCount(value, name)"><label for="rad-2">
</label>
<input type="radio" name="star1" id="rad-1" value="1" onclick="scoreCount(value, name)"><label for="rad-1">
</label>
</div>
<div class="rating2">
<input type="radio" name="star2" id="rad-6" value="5" onclick="scoreCount(value, name)"><label for="rad-6">
</label>
<input type="radio" name="star2" id="rad-7" value="4" onclick="scoreCount(value, name)"><label for="rad-7">
</label>
<input type="radio" name="star2" id="rad-8" value="3" onclick="scoreCount(value, name)"><label for="rad-8">
</label>
<input type="radio" name="star2" id="rad-9" value="2" onclick="scoreCount(value, name)"><label for="rad-9">
</label>
<input type="radio" name="star2" id="rad-10" value="1" onclick="scoreCount(value, name)"><label for="rad-10">
</label>
</div>
<div class="rating3">
<input type="radio" name="star3" id="rad-11" value="5" onclick="scoreCount(value, name)"><label for="rad-11">
</label>
<input type="radio" name="star3" id="rad-12" value="4" onclick="scoreCount(value, name)"><label for="rad-12">
</label>
<input type="radio" name="star3" id="rad-13" value="3" onclick="scoreCount(value, name)"><label for="rad-13">
</label>
<input type="radio" name="star3" id="rad-14" value="2" onclick="scoreCount(value, name)"><label for="rad-14">
</label>
<input type="radio" name="star3" id="rad-15" value="1" onclick="scoreCount(value, name)"><label for="rad-15">
</label>
</div>
<div class="rating4">
<input type="radio" name="star4" id="rad-16" value="5" onclick="scoreCount(value, name)"><label for="rad-16">
</label>
<input type="radio" name="star4" id="rad-17" value="4" onclick="scoreCount(value, name)"><label for="rad-17">
</label>
<input type="radio" name="star4" id="rad-18" value="3" onclick="scoreCount(value, name)"><label for="rad-18">
</label>
<input type="radio" name="star4" id="rad-19" value="2" onclick="scoreCount(value, name)"><label for="rad-19">
</label>
<input type="radio" name="star4" id="rad-20" value="1" onclick="scoreCount(value, name)"><label for="rad-20">
</label>
</div>
<div class="rating5">
<input type="radio" name="star5" id="rad-21" value="5" onclick="scoreCount(value, name)"><label for="rad-21">
</label>
<input type="radio" name="star5" id="rad-22" value="4" onclick="scoreCount(value, name)"><label for="rad-22">
</label>
<input type="radio" name="star5" id="rad-23" value="3" onclick="scoreCount(value, name)"><label for="rad-23">
</label>
<input type="radio" name="star5" id="rad-24" value="2" onclick="scoreCount(value, name)"><label for="rad-24">
</label>
<input type="radio" name="star5" id="rad-25" value="1" onclick="scoreCount(value, name)"><label for="rad-25">
</label>
</div>
</form>
Your Javascript would look something like this:
var total_score;
var dict = {};
function scoreCount(value, name) {
dict[name] = parseInt(value);
total_score = 0;
for (var score of Object.values(dict)){
total_score += score;
}
}
Each time u click a button now, it will add a pair to the dict or replace it if it already exists and recalculate the total score based on the new dict.

How to make accordion doesn't work and tell me Cannot read property 'classList' of undefined if element existed?

This is what I have at the moment. This code doesn't work as it should.
I need to make that - if I press for header element section must disappear, when I press again it must appear. I don't understand why it tells me that element undefined if it existed in HTML.... Can anyone help me with this problem please?
var filterTrigger = document.querySelectorAll('.catalog__filter-form h3');
var filterSection = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
for (var j = 0; j < filterTrigger.length; j++) {
filterInputs[j].classList.add('filter-hidden');
filterTrigger[j].addEventListener('click', function(evt) {
evt.preventDefault();
filterSection[j].classList.toggle('catalog__filter-section--opened');
filterInputs[j].classList.toggle('filter-visible');
});
}
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3>Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3>Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3>Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
Necklaces
</label>
</div>
</div>
</form>
</div>

because function run when you click on h3 to hide child and at that time j will be 4.
you most create a const variable and store element in it.
var filterTrigger = document.querySelectorAll('.catalog__filter-form h3');
var filterSection = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
function onClick(event, secEl, inpEl){
event.preventDefault();
secEl.classList.toggle('catalog__filter-section--opened');
inpEl.classList.toggle('filter-visible');
}
for (var j = 0; j < filterTrigger.length; j++) {
const secEl = filterSection[j]
const inpEl = filterInputs[j]
filterInputs[j].classList.add('filter-hidden');
filterTrigger[j].addEventListener('click', function(e){ onClick(e, secEl, inpEl) });
}
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3>Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3>Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3>Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
Necklaces
</label>
</div>
</div>
</form>
</div>

It was not trivial, but here you are
Added trigger class to the trigger h3
Close all on load
Delegate from the container div
Add some missing html (spans to the last checkbox)
var filterSections = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
const closeAll = () => {
filterInputs.forEach((inp, i) => inp.classList.add('filter-hidden'));
filterSections.forEach((section, i) => section.classList.remove('catalog__filter-section--opened'));
}
closeAll()
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.classList.contains("trigger")) return
const filterSection = tgt.nextElementSibling;
const filterInput = filterSection.querySelector(".catalog__filter-inputs");
closeAll();
filterSection.classList.toggle('catalog__filter-section--opened');
filterInput.classList.toggle('filter-visible');
});
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<div id="container">
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3 class="trigger">Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3 class="trigger">Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3 class="trigger">Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
<span></span>
Necklaces
</label>
</div>
</div>
</form>
</div>

checkbox forced on new line

I am trying to add a checkbox but it seems to always go on the next line.
I somehow fixed it by design but it goes back on the new line always.
This is sample checkbox I am copying from the web
input[type=checkbox]+label {
display: block;
cursor: pointer;
padding: 0.2em;
width: 113px;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 0.1em solid #000;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: MediumSeaGreen;
border-color: MediumSeaGreen;
color: #fff;
}
<input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
<label for="fruit1">Apple</label>
<input type="checkbox" id="fruit2" name="fruit-2" value="Banana" disabled>
<label for="fruit2">Banana</label>
<input type="checkbox" id="fruit3" name="fruit-3" value="Cherry" checked disabled>
<label for="fruit3">Cherry</label>
<input type="checkbox" id="fruit4" name="fruit-4" value="Strawberry">
<label for="fruit4">Strawberry</label>

Do not use display block for label:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
input[type=checkbox]+label {
cursor: pointer;
padding: 0.2em;
width: 113px;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 0.1em solid #000;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: MediumSeaGreen;
border-color: MediumSeaGreen;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
<label for="fruit1">Apple</label>
<input type="checkbox" id="fruit2" name="fruit-2" value="Banana" disabled>
<label for="fruit2">Banana</label>
<input type="checkbox" id="fruit3" name="fruit-3" value="Cherry" checked disabled>
<label for="fruit3">Cherry</label>
<input type="checkbox" id="fruit4" name="fruit-4" value="Strawberry">
<label for="fruit4">Strawberry</label>
</div>
</script>
</body>
</html>
Sample

changing the look of the radio button

I am sure this question was asked before but I am looking for a very specific way to style a radio button.
Here is the fiddle of what I currently have
<label for="pretty">
<input type="radio" value="pretty" name="quality" id="pretty"> <span>pretty</span>
</label>
<label for="accessible-and-pretty">
<input type="radio" value="pretty" name="quality" id="accessible-and-pretty" checked> <span>accessible and pretty</span>
</label>
The question that I have is how can I achieve the attached image look and feel?
I am having trouble figuring our how to make the green area smaller or if there is something else I need to do to achieve that

Feel free to change the colors, gradients and sizes to match your requirement.
.container {
width: 100px;
margin: 0 auto;
}
.radio-grp {
margin-bottom: 10px;
}
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 0;
width: 0;
}
input[type="radio"] + label {
display: inline-block;
position: relative;
height: 30px;
width: 30px;
border-radius: 100%;
background-color: #fff;
border: 1px solid #ddd;
}
input[type="radio"] + label,
.radio-txt {
cursor: pointer;
}
label.radio-txt {
display: inline-block;
float: right;
padding-top: 5px;
}
input[type="radio"] + label:before {
content: '';
position: absolute;
height: 22px;
width: 22px;
border-radius: 100%;
top: 4px;
left: 4px;
box-shadow: 4px 5px 10px 0px #ccc inset;
}
input[type="radio"] + label:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
border-radius: 100%;
top: 10px;
left: 10px;
transition: background 0.1s linear;
}
input[type="radio"]:checked + label:after {
background-color: #888888;
}
<div class="container">
<div class="radio-grp">
<input type="radio" name="demo" value="1" id="radio1" checked>
<label for="radio1"></label>
<label for="radio1" class="radio-txt">Demo 1</label>
</div>
<div class="radio-grp">
<input type="radio" name="demo" id="radio2" value="2">
<label for="radio2"></label>
<label for="radio2" class="radio-txt">Demo 2</label>
</div>
<div class="radio-grp">
<input type="radio" name="demo" id="radio3" value="3">
<label for="radio3"></label>
<label for="radio3" class="radio-txt">Demo 3</label>
</div>
</div>

How to remove either bullets / numbers from survey form

I have developed a quiz form wherein form before question both bullets and numbers are coming. I want to remove one of this (either bullets or number).
Please see this image
* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
max-width:100%;
height:auto;
border:0;
vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
color: #fff;
text-decoration: none;
}
a:active, a:hover, a:focus {
outline: 0 none;
text-decoration: none
}
.clear{clear:both}
#wrapper
{
height:100%;
width:100%;
}
body {
color: #000;
height:100%;
width:100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x:hidden;
}
#header {
width:100%;
height:100px;
}
#logo{
clear:both;
margin:20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px; margin: 0 0 1px 0; color: #000;
font-family: 'Roboto', sans-serif;
font-weight:600;
}
#quiz label
{
font-family: 'Roboto', sans-serif;
font-weight:normal;
}
#results {
font: 44px Georgia, Serif;
}
center
{
font-size:xx-large;
padding:20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover{
background-color:#DBDBDB;
color:#000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer{
width:100%;
height:80px;
background-color:#2D2D2D;
color:#9C9C9C;
position:absolute;
clear:both;
margin-top:2%;
}
#footer #footer-center
{
font-size:18px;
margin:auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear:both;
padding:20px 0 0 0 ;
}
.survey-form
{
width:100%;
min-height:500px
}
li{
padding-bottom:20px;
margin-left:0px;
padding-left:0px;
}
ul
{
padding:0px;
margin:0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No </label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No </label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center"> Copyright © 2016 Secqureone,Inc. All rights reserved </center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for(i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if(currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>
please help how to solve this.

You add list-style: none; to your ul tag
* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
max-width:100%;
height:auto;
border:0;
vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
color: #fff;
text-decoration: none;
}
a:active, a:hover, a:focus {
outline: 0 none;
text-decoration: none
}
.clear{clear:both}
#wrapper
{
height:100%;
width:100%;
}
body {
color: #000;
height:100%;
width:100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x:hidden;
}
#header {
width:100%;
height:100px;
}
#logo{
clear:both;
margin:20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ul {
list-style: none;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px; margin: 0 0 1px 0; color: #000;
font-family: 'Roboto', sans-serif;
font-weight:600;
}
#quiz label
{
font-family: 'Roboto', sans-serif;
font-weight:normal;
}
#results {
font: 44px Georgia, Serif;
}
center
{
font-size:xx-large;
padding:20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover{
background-color:#DBDBDB;
color:#000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer{
width:100%;
height:80px;
background-color:#2D2D2D;
color:#9C9C9C;
position:absolute;
clear:both;
margin-top:2%;
}
#footer #footer-center
{
font-size:18px;
margin:auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear:both;
padding:20px 0 0 0 ;
}
.survey-form
{
width:100%;
min-height:500px
}
li{
padding-bottom:20px;
margin-left:0px;
padding-left:0px;
}
ul
{
padding:0px;
margin:0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No </label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No </label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center"> Copyright © 2016 Secqureone,Inc. All rights reserved </center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for(i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if(currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>

Either remove jQuery code
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
OR add style
#quiz ul li{
list-style:none;
}
Here is the updated code:
* {
margin: 0;
padding: 0;
}
#quiz ul li {
list-style: none;
}
.floatleft {
float: left !important;
}
.floatright {
float: right !important;
}
.floatnone {
float: none !important;
}
.alignleft {
text-align: left !important;
}
.alignright {
text-align: right !important;
}
.aligncenter {
text-align: center !important;
}
.no-display {
display: none;
}
.no-margin {
margin: 0 !important;
}
.no-padding {
padding: 0 !important;
}
a:focus,
button:focus {
outline: 0px solid
}
img {
max-width: 100%;
height: auto;
border: 0;
vertical-align: top;
}
.fix {
overflow: hidden
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 10px;
color: #000;
}
a {
transition: all 0.3s ease 0s;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
a:active,
a:hover,
a:focus {
outline: 0 none;
text-decoration: none
}
.clear {
clear: both
}
#wrapper {
height: 100%;
width: 100%;
}
body {
color: #000;
height: 100%;
width: 100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x: hidden;
}
#header {
width: 100%;
height: 100px;
}
#logo {
clear: both;
margin: 20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px;
margin: 0 0 1px 0;
color: #000;
font-family: 'Roboto', sans-serif;
font-weight: 600;
}
#quiz label {
font-family: 'Roboto', sans-serif;
font-weight: normal;
}
#results {
font: 44px Georgia, Serif;
}
center {
font-size: xx-large;
padding: 20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover {
background-color: #DBDBDB;
color: #000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer {
width: 100%;
height: 80px;
background-color: #2D2D2D;
color: #9C9C9C;
position: absolute;
clear: both;
margin-top: 2%;
}
#footer #footer-center {
font-size: 18px;
margin: auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear: both;
padding: 20px 0 0 0;
}
.survey-form {
width: 100%;
min-height: 500px
}
li {
padding-bottom: 20px;
margin-left: 0px;
padding-left: 0px;
}
ul {
padding: 0px;
margin: 0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
<link rel="stylesheet" type="text/css" href="CSS/responsive.css" />
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<a href="index.html" class="standard-logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</a>
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No</label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No</label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center">Copyright © 2016 Secqureone,Inc. All rights reserved</center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for (i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if (currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>

Categories