No sé cómo editar mi bloque de posibles respuestas para un cuestionario interactivo que creé en JavaScript. No sé cómo llamar a "opciones" en mi archivo CSS para diseñar el sitio web como quiero. Soy realmente nuevo en 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 se basa en "selectores" para especificar lo que desea diseñar. Hay varias formas de reducir las entradas en su caso.
Por elemento
/* all inputs */ input { color: blue; } /* inputs inside labels */ label input { color: blue; }Por atributo
input[name=choices] { color: blue; }Recomendaría usar clases (un atributo especial que utiliza css)
Si agrega una clase a las entradas como esta:
quiz.innerHTML += "<label> <input type='radio' class='pretty-choice' name='choices' value='a'> " + chA + "</label><be>";su selector css debe ser "punto" más el nombre de la clase
.pretty-choice { color: blue; }