Egy kvizt akarok osszerakni (html, css, js) viszont a "radio button" nem ugy mukodik ahogy szeretnem, nem kerdesenkent tudok egyet kivalasztani hanem az egeszbol egyet, mi a baj?

A sima radio button-os "gyakorlatom" jol mukodik.

Most megprobaltam kicsi kiszinezni a radio button reszet, de a kivalasztas az egesz form-ra mukodik, tehat nem tudok kerdesenkent 1-1 valaszt kivalasztani. Mi a baj?

HTML:

<div class="holder">

<h2>Custom Radio</h2>

<form name="quizForm" onsubmit="return submitAnswers()" class="customRadio">

<div class="row">

<p>Hali?</p>

</div>

<div class="row">

<input type="radio" name="q1" value="a" id="q1a">

<label for="q1a">xy</label>

</div>

<div class="row">

<input type="radio" name="q1" value="b" id="q1b">

<label for="q1b">Sublime Text</label>

</div>

<div class="row">

<input type="radio" name="q1" value="c" id="q1c">

<label for="q1c">Visual Studio Code</label>

</div>

<div class="row">

<input type="radio" name="q1" value="d" id="q1d">

<label for="q1d">Notepad++</label>

</div>

<div class="row">

<p>Hali</p>

</div>

<div class="row">

<input type="radio" name="q1" value="a" id="q2a">

<label for="q2a">Adobe Dreamweaver</label>

</div>

<div class="row">

<input type="radio" name="q1" value="b" id="q2b">

<label for="q2b">Sublime Text</label>

</div>

<div class="row">

<input type="radio" name="q1" value="c" id="q2c">

<label for="q2c">Visual Studio Code</label>

</div>

<div class="row">

<input type="radio" name="q1" value="d" id="q2d">

<label for="q2d">xy</label>

</div>

<div class="row">

<p>Hali?</p>

</div>

<div class="row">

<input type="radio" name="q1" value="a" id="q3a">

<label for="q3a">Adobe Dreamweaver</label>

</div>

<div class="row">

<input type="radio" name="q1" value="b" id="q3b">

<label for="q3b">xy</label>

</div>

<div class="row">

<input type="radio" name="q1" value="c" id="q3c">

<label for="q3c">Visual Studio Code</label>

</div>

<div class="row">

<input type="radio" name="q1" value="d" id="q3d">

<label for="q3d">Notepad++</label>

</div>

<div class="row">

<p>Hali?</p>

</div>

<div class="row">

<input type="radio" name="q1" value="a" id="q4a">

<label for="q4a">Adobe Dreamweaver</label>

</div>

<div class="row">

<input type="radio" name="q1" value="b" id="q4b">

<label for="q4b">xy</label>

</div>

<div class="row">

<input type="radio" name="q1" value="c" id="q4c">

<label for="q4c">Visual Studio Code</label>

</div>

<div class="row">

<input type="radio" name="q1" value="d" id="q4d">

<label for="q4d">Notepad++</label>

</div>

<div class="row">

<p>Hali?</p>

</div>

<div class="row">

<input type="radio" name="q1" value="a" id="q5a">

<label for="q5a">Adobe Dreamweaver</label>

</div>

<div class="row">

<input type="radio" name="q1" value="b" id="q5b">

<label for="q5b">Sublime Text</label>

</div>

<div class="row">

<input type="radio" name="q1" value="c" id="q5c">

<label for="q5c">Visual Studio Code</label>

</div>

<div class="row">

<input type="radio" name="q1" value="d" id="q5d">

<label for="q5d">xy</label>

</div>

</form>

<input type="submit" value="Submit Answers">

<div id="results"></div>

CSS:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

html {

box-sizing: border-box;

}

*, *:before, *:after {

box-sizing: inherit;

}

* {

max-height: 1000000px;

margin: 0;

padding: 0;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

/* general */

body {

font: 300 18px/1.5 'Roboto', sans-serif;

color: #333;

background: url('../images/bg.jpg') no-repeat;

background-size: cover;

}

.holder {

border-bottom: 1px dashed #ccc;

padding: 0 0 30px;

margin: 0 0 30px;

}

.row {

margin: 0 0 15px;

}

h2 {

font-weight: 500;

font-size: 30px;

margin: 0 0 20px;

}

/* custom radio */

.customRadio input[type="radio"] {

position: absolute;

left: -9999px;

}

.customRadio input[type="radio"]+label {

position: relative;

padding: 3px 0 0 40px;

cursor: pointer;

}

.customRadio input[type="radio"]+label:before {

content: '';

background: #fff;

border: 2px solid #1cbe9d;

height: 25px;

width: 25px;

border-radius: 50%;

position: absolute;

top: 0;

left: 0;

}

.customRadio input[type="radio"]+label:after {

content: '';

background: #1cbe9d;

width: 15px;

height: 15px;

border-radius: 50%;

position: absolute;

top: 5px;

left: 5px;

opacity: 0;

transform: scale(2);

transition: transform 0.3s linear, opacity 0.3s linear;

}

.customRadio input[type="radio"]:checked+label:after {

opacity: 1;

transform: scale(1);

}

JS

function submitAnswers(){

var total = 5;

var score = 0;

// Get User Input

var q1 = document.forms["quizForm"]["q1"].value;

var q2 = document.forms["quizForm"]["q2"].value;

var q3 = document.forms["quizForm"]["q3"].value;

var q4 = document.forms["quizForm"]["q4"].value;

var q5 = document.forms["quizForm"]["q5"].value;

// Validation

for(i = 1; i <= total;i++){

if(eval('q'+i) == null || eval('q'+i) == ''){

alert('You missed question '+ i);

return false;

}

}

// Set Correct Answers

var answers = ["a","d","b","b","d"];

// Check Answers

for(i = 1; i <= total;i++){

if(eval('q'+i) == answers[i - 1]){

score++;

}

}

// Display Results

var results = document.getElementById('results');

results.innerHTML = '<h3>You scored <span>'+score+'</span> out of <span>'+total+'</span></h3>';

return false;

}