我正在尝试为我的答案选项添加图片并使其可点击而不是在调查问卷上做出选择，但我真的被卡住了。
我不知道是否必须为按钮创建CSS类，然后使它们隐藏。但无论如何，也许我的脑袋充满了东西，看不到快速的解决方案。
任何人都可以帮我吗？
我真的很感激。
这是我的一些代码。
感谢您的支持，希望您有一个美好的一年!!
(function() {
var questions = [{
question: "¿En qué estado tienes tu idea de negocio?",
choices: ["Idea", "Boceto", "Maduración"],
}, {
question: "Almacenamiento de datos",
choices: ["Internet","App","No lo sé"],
}, {
question: "Calidad de tu App",
choices: ["Alta", "Media", "Baja", "No lo sé"],
}, {
question: "¿Para qué dispositivo quieres desarrollarlo?",
choices: ["Android", "iOS", "Android/iOS"],
}, {
question: "Interfaz de tu App",
choices: ["Sencilla", "Llamativa", "Animada"],
}, {
question: "Beneficio extra de tu App",
choices: ["Publicidad", "App de pago", "Compras en la App", "No lo sé"],
}, {
question: "Sistema de ingreso a tu App",
choices: ["Redes Sociales", "E-mail", "Ninguna", "No lo sé"],
}, {
question: "Intregraciones",
choices: ["Sí", "No", "No lo sé"],
}, {
question: "Configuración perfil de usuario",
choices: ["Sí", "No", "No lo sé"],
}, {
question: "Panel de administración",
choices: ["Sí", "No", "No lo sé"],
}, {
question: "¿Quieres que tu app genere reportes?",
choices: ["Sí", "No", "No lo sé"],
}, {
question: "¿Quieres hacerla multilenguaje?",
choices: ["1 idioma", "2 idiomas", "Multilenguajes"],
}];
var questionCounter = 0; //Tracks question number
var selections = []; //Array containing user choices
var quiz = $('#quiz'); //Quiz div object
// Display initial question
displayNext();
// Click handler for the 'next' button
$('#next').on('click', function (e) {
e.preventDefault();
// Suspend click listener during fade animation
if(quiz.is(':animated')) {
return false;
}
choose();
// If no user selection, progress is stopped
if (isNaN(selections[questionCounter])) {
alert('Por favor selecciona una opción');
} else {
questionCounter++;
displayNext();
}
});
// Click handler for the 'prev' button
$('#prev').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
choose();
questionCounter--;
displayNext();
});
// Click handler for the 'Start Over' button
$('#start').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
questionCounter = 0;
selections = [];
displayNext();
$('#start').hide();
});
// Animates buttons on hover
$('.button').on('mouseenter', function () {
$(this).addClass('active');
});
$('.button').on('mouseleave', function () {
$(this).removeClass('active');
});
// Creates and returns the div that contains the questions and
// the answer selections
function createQuestionElement(index) {
var qElement = $('<div>', {
id: 'question'
});
var image=$('<div>',{'id':'imagelogo'});
var header = $('<h5>' + (index + 1) + '/12</h5>').addClass('contador');
qElement.append(header).append(image);
var question = $('<p>').append(questions[index].question);
qElement.append(question);
var radioButtons = createRadios(index);
qElement.append(radioButtons);
return qElement;
}
// Creates a list of the answer choices as radio inputs
function createRadios(index) {
var radioList = $('<ul>');
var item;
var input = '';
for (var i = 0; i < questions[index].choices.length; i++) {
item = $('<li>');
input = '<input type="radio" name="answer" value=' + i + ' />';
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}
return radioList;
}
// Reads the user selection and pushes the value to an array
function choose() {
selections[questionCounter] = +$('input[name="answer"]:checked').val();
}
// Displays next requested element
function displayNext() {
quiz.fadeOut(function() {
$('#question').remove();
if(questionCounter < questions.length){
var nextQuestion = createQuestionElement(questionCounter);
quiz.append(nextQuestion).fadeIn();
if (!(isNaN(selections[questionCounter]))) {
$('input[value='+selections[questionCounter]+']').prop('checked', true);
}
// Controls display of 'prev' button
if(questionCounter === 1){
$('#prev').show();
} else if(questionCounter === 0){
$('#prev').hide();
$('#next').show();
}
}else {
var scoreElem = displayScore();
quiz.append(scoreElem).fadeIn();
$('#next').hide();
$('#prev').hide();
$('#start').show();
}
});
}
// Computes score and returns a paragraph element to be displayed
function displayScore() {
var score = $('<p>',{id: 'question'});
var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {
if (selections[i] === questions[i].correctAnswer) {
numCorrect++;
}
}
score.append('<strong>¡A punto de aterrizar!</strong>' + '<br>' + 'En unos minutos nuestro equipo especializado' +
' se contactará contigo');
return score;
}
})();
这是我的HTML代码。
<!-- Page Content -->
<section class="content-section-a spacing idea">
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-12">
<div class="container">
<center>
<h3 class="color" id="left"><strong> Hola (Nombre y Apellido) </strong> <br> <span id="left"> Calculemos tu App </span> </h3>
</center>
<br>
</div>
<div class="clearfix"></div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-12">
<div class="container">
<div id='quiz'></div>
<div class='button' id='next'><a href='#'>Siguiente</a></div>
<div class='button' id='prev'><a href='#'>Anterior</a></div>
<div class='button' id='start'> <a href='#'>Comenzar nuevamente</a></div>
<!-- <button class='' id='next'> Siguiente </a></button>
<button class='' id='prev'> Anterior </a></button>
<button class='' id='start'> Comenzar nuevamente </a></button> -->
</div>
</div>
</div>
</section>
<!--End of Page Content-->