Quiero hacer una página de sitio web para la prueba de idioma que cuando el usuario haga clic en el botón de reproducción, se muestre la cantidad de preguntas y las opciones. Así que escribí este código:
const audioA = document.getElementById("AudioA"); const playBtn = document.getElementById("PlayBtn"); function playPartA() { audioA.play(); playBtn.style.color = "#777777"; showQuestion(); } function showQuestion(){ for(let i = 0; i < 30; i++){ $(".questionBox").append('<div class="Question"></div><div class="Options"><span></span><span></span><span></span><span></span></div>'); } $(".secondBox").append('<a href="Listening Part A.html" class="btnToPartB">Continue to Part B</a>'); $('.Question').each(function(index){ $(this).html("Number "); $(this).append(index+1); }); $('.Options').QuesPartA.forEach(option => { $('.Options span').eq(0).text(option[0]); $('.Options span').eq(1).text(option[1]); $('.Options span').eq(2).text(option[2]); $('.Options span').eq(3).text(option[3]); }); };Y esta es la matriz:
let QuesPartA = [ { option: [ "She doesn't have an appointment", "She must live somewhere else", "Her apartment isn't far away", "Her problem is complicated", ], answer: 2 }, { option: [ "There's no charge for phone calls", "She can call him later if she likes", "His phone is out of order too", "She can use his phone if she wants", ], answer: 1 }, { option: [ "It was simpler than he'd thought", "It was too hard to solve", "He couldn't find it", "He solved it even though it was hard", ], answer: 3 } ]; Así que uso .append para crear muchos cuadros para las opciones de respuesta, luego quiero poner el valor del elemento de opción en esos cuadros. Pero fracasé. ¿Alguien sabe cómo hacer eso?
En lugar de crear preguntas primero y luego completar cada una con opciones, puede crear ambas al mismo tiempo iterando a través de la matriz de preguntas de esta manera.
function showQuestion(){ for(let i = 0; i < QuesPartA.length; i++){ $(".questionBox").append('<div class="Question">Number '+ parseInt(i+1) +'</div>'); $(".questionBox").append('<div class="Options" id="optId'+ parseInt(i+1) +'">'); QuesPartA[i]['option'].forEach(option => { $("#optId"+ parseInt(i+1)).append('<span>'+option +' </span><br>'); }); $(".questionBox").append('</div><br>'); // end Options div } $(".secondBox").append('<a href="Listening Part A.html" class="btnToPartB">Continue to Part B</a>'); };Después de inicializar el quetionBox con las 30 preguntas, aplique a continuación:
$.each(QuesPartA,function(index,value){ $(".questionBox").find(".Question:eq(" + index + ")").find("span:eq(0)").html(value.option[0]); $(".questionBox").find(".Question:eq(" + index + ")").find("span:eq(1)").html(value.option[1]); $(".questionBox").find(".Question:eq(" + index + ")").find("span:eq(2)").html(value.option[2]); $(".questionBox").find(".Question:eq(" + index + ")").find("span:eq(3)").html(value.option[3]); });La lógica es simple, basada en el índice de matriz QuesPartA, encuentre la pregunta correcta y el intervalo correcto para cambiar su valor html.