For the mcq survey I'm making I need to style the 3 answers with 3 radio buttons. I looked around for this problem but could not find anyone using same format as me.
The logic and java script is working perfectly but I cant find a way to align the 3 answers vertically in the center, with the radio buttons to the left of them.
Here's the code snippet:
var elem = document.getElementById("myBar");
var width = 0;
var id = null;
var click = false;
function move() {
var elem = document.getElementById("myBar");
if (width < 100) {
width+=10;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
function intil() {
questions = [ "question1 ?", "question2?","question3?" ];
answers = [ ["a", "answer1"], ["b", "answer2"],["c","answer3"] ,
["a", "5%"], ["b", "13%"], ["c","29%"],
["a","4890"],["b","7589"],["c","12056"] ];
correctAnswers = ["a", "b" ,"c" ];
curQuesNum=0
previous.style.display = "none";
submit.style.display = "none";
review.style.display = "none";
retry.style.display = "none";
img1.style.display="none";
img2.style.display="none";
next.addEventListener("click",showNext);
previous.addEventListener("click",showPrev);
submit.addEventListener("click",submits);
retry.addEventListener("click",retrys);
review.addEventListener("click",reviews);
inputAnswers= Array(questions.length).fill(0)
correctAnswer.style.display = "none";
wrongAnswers=[]
check3=0
check1=0
}
function showQuiz() {
checkSlide()
document.getElementById("question").innerHTML= curQuesNum+1+") "+questions[curQuesNum]
document.getElementById("answer1").innerHTML= answers[(3*curQuesNum)][0]+": "+answers[(3*curQuesNum)][1];
document.getElementById("answer2").innerHTML= answers[(3*curQuesNum)+1][0]+": "+answers[(3*curQuesNum)+1][1];
document.getElementById("answer3").innerHTML= answers[(3*curQuesNum)+2][0]+": "+answers[(3*curQuesNum)+2][1];
document.getElementById("correctAnswer").innerHTML="The correct answer is: "+correctAnswers[curQuesNum];
}
function checkSlide(){
if (curQuesNum!==0) {
previous.style.display = "inline-block";
} else {
previous.style.display = "none";
}
if (curQuesNum===questions.length-1) {
next.style.display = "none";
if (check3==0) {
submit.style.display = "inline-block";
}
}
if (curQuesNum!==questions.length-1) {
next.style.display = "inline-block";
submit.style.display = "none";
}
}
function checkinput() {
if (check3==0) {
check2=0
var radios = document.getElementsByName('mcq');
var radiosVal;
for(var i = 0; i < radios.length; i++) {
if(radios[i].checked){
radiosVal = radios[i].value;
check2=1;
}
}
if (check2==1) {
inputAnswers[curQuesNum]=radiosVal
} else {
inputAnswers[curQuesNum]=0
}
}
}
function clearRadio(){
if (inputAnswers[curQuesNum]==0) {
var ele = document.getElementsByName("mcq");
for(var i=0;i<ele.length;i++)
ele[i].checked = false;
}
}
function showResults() {
numCorrect = 0;
for(var i=0;i<questions.length;i++) {
if (inputAnswers[i]==correctAnswers[i]) {
numCorrect++
} else {
wrongAnswers.push(i);
}
}
var percentage = numCorrect / questions.length;
var outMessage;
if (percentage >= 0.9) {
outMessage = 'Great job! You are an Expert!'
} else if (percentage >= .75) {
outMessage = 'Pritty good! Keep improving!.';
var image = document.getElementById('img1');
image.src = "silver.jpg";
} else if (percentage >= .5) {
outMessage = 'Not bad. Keep practicing!';
var image = document.getElementById('img1');
image.src = "bronze.jpg";
} else {
outMessage = 'Ohoh you need to catch up!';
var image = document.getElementById('img1');
image.src = "4th.jpg";
}
document.getElementById("resultMessage").innerHTML=outMessage
img1.style.display="block"
document.getElementById("results").innerHTML = "You got </br>"+ numCorrect+" out of "+ questions.length;
}
function reviews() {
check3=1
curQuesNum=0
showQuiz()
clearRadio()
selectRadio()
showRev()
img2.style.display="inline-block";
img1.style.display="none";
question.style.display = "block";
radio1.style.display = "block";
answer1.style.display = "block";
radio2.style.display = "block";
answer2.style.display = "block";
radio3.style.display = "block";
answer3.style.display = "block";
answer3.style.display = "block";
review.style.display = "none";
results.style.display = "none";
resultMessage.style.display = "none";
next.style.display = "inline-block";
myProgress.style.display = "none";
myBar.style.display = "none";
}
function showRev() {
if (check3==1) {
if (wrongAnswers.includes(curQuesNum)) {
var image2 = document.getElementById('img2');
image2.src = "cross.jpg";
correctAnswer.style.display = "block";
} else{
var image2 = document.getElementById('img2');
image2.src = "tick.jpg";
correctAnswer.style.display = "none";
}
}
}
function submits() {
checkinput()
curQuesNum++
move()
retry.style.display = "inline-block";
question.style.display = "none"
radio1.style.display = "none"
answer1.style.display = "none"
radio2.style.display = "none"
answer2.style.display = "none"
radio3.style.display = "none"
answer3.style.display = "none"
previous.style.display = "none"
submit.style.display = "none"
review.style.display = "inline-block";
showResults()
}
function selectRadio() {
var temp=inputAnswers[curQuesNum]
if (temp=="a") {
document.getElementById("rad1").checked = true;
}
if (temp=="b") {
document.getElementById("rad2").checked = true;
}
if (temp=="c") {
document.getElementById("rad3").checked = true;
}
}
function retrys() {
location.reload()
}
function showNext() {
checkinput()
if (check1==0){
move();
} else {
check1++;
}
curQuesNum++
clearRadio()
selectRadio()
showRev()
showQuiz()
}
function showPrev() {
check1--
checkinput()
curQuesNum--
clearRadio()
selectRadio()
showRev()
showQuiz()
}
function main() {
intil()
showQuiz()
}
main()@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
#myProgress {
margin:20px;
width: 90%;
background-color: #ddd;
text-align: center;
outline-style: solid;
}
.progress {
margin-left: auto;
margin-right:auto;
}
#myBar {
width: 5%;
height: 40px;
background-color: #38a;
text-align: center;
line-height: 40px;
color: black;
}
#img1{
display: block;
max-height:35%
height: auto;
margin-left: auto;
margin-right: auto;
max-width: 25%;
}
#resultMessage{
font-weight: 300;
margin: 0px;
font-size: 30px;
background-color: #f8f6f0;
color: black;
}
#question{
font-weight: 200;
margin: 20px;
font-size: 25px;
background-color: #f8f6f0;
color: black;
}
#correctAnswer{
font-weight: 200;
margin: 20px;
font-size: 20px;
background-color: #f8f6f0;
color: black;
font-style: italic;
}
#img2{
display: inline-block;
max-height:5%
height: auto;
margin-left: auto;
margin-right: auto;
max-width: 5%;
}
h1{
font-weight: 300;
margin: 0px;
padding: 10px
font-size: 30px;
background-color: #444;
color: #fff;
}
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
margin-top: 20px;
}
button:hover{
background-color: #38a;
}<h1>Test Your Knowledge</h1><div id="question"></div><div id="radio1"><input type="radio" name="mcq" id="rad1" value="a"></div><div id="answer1"></div><div id="radio2"><input type="radio" name="mcq" id="rad2" value="b"></div><div id="answer2"></div><div id="radio3"><input type="radio" name="mcq" id="rad3" value="c"></div><div id="answer3"></div><img src="tick.jpg" alt="tickcross" id="img2"><div id="correctAnswer"></div><div id="resultMessage"></div><div id="results"></div><img src="gold.jpg" alt="medal" id="img1"><div id="myProgress" class="progress"><div id="myBar">0%</div></div><button id="previous">Previous Question</button><button id="next">Next Question</button><button id="submit">Submit Quiz</button><button id="review">Review</button><button id="retry">Retry</button>Please help me with the css or any adjustments for html.