I don't know how to edit my block of possible answers for an interactive quiz that I created in JavaScript. I don't know how to call "choices" in my CSS file to style the website as I want. I'm really new to HTML.
function renderQuestion() {
quiz = get("quiz");
get("quiz_status").innerHTML = "Question " + (position + 1) + " of " + questions.length;
question = questions[position].question;
chA = questions[position].a;
chB = questions[position].b;
chC = questions[position].c;
chD = questions[position].d;
//Add local var to hold uri
img = questions[position].img;
quiz.innerHTML = "<h3></h3>";
//Add <img> element to DOM with source
quiz.innerHTML += "<img src=\"" + img + "\"><br>";
quiz.innerHTML += "<label> <input type='radio' name='choices' value='a'> " + chA + "</label><be>";
quiz.innerHTML += "<label> <input type='radio' name='choices' value='b'> " + chB + "</label><be>";
quiz.innerHTML += "<label> <input type='radio' name='choices' value='c'> " + chC + "</label><be>";
quiz.innerHTML += "<label> <input type='radio' name='choices' value='d'> " + chD + "</label><br><be>";
quiz.innerHTML += "<button onclick='showPrevious()'>⇦ Question</button>";
quiz.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
quiz.innerHTML += "<button onclick='showNext()'>Question ⇨</button>";
}
window.addEventListener("load", renderQuestion);
CSS is based on "selectors" to specify what you want to style. There are several ways to narrow down the inputs in your case.
By element
/* all inputs */
input {
color: blue;
}
/* inputs inside labels */
label input {
color: blue;
}
By attribute
input[name=choices] {
color: blue;
}
I would recommend using classes (a special attribute that css utilizes)
If you add a class to the inputs like this:
quiz.innerHTML += "<label> <input type='radio' class='pretty-choice' name='choices' value='a'> " + chA + "</label><be>";
your css selector needs to be "dot" plus the class name
.pretty-choice {
color: blue;
}