Question

我有一个多项选择测验，我想使用图像作为选项，而不是使用文本。我尝试使用img里面的div，但它不起作用。是否有不同的方法来解决这个问题？

   

var quizData = [
		{question:"Which animal would survive in a forest?",
		 answers:["Lion","Frog","Pigeon"],
		 correctAnswer:2,
		 feedback:"Frogs can live pretty much anywhere except for Antartica and they prefer to live at marshes, ponds,and lakes."
		},
		]


function showQuestion(){
	$("#question").html(quizData[currentQuestion-1].question);
	$("#answer1").html(quizData[currentQuestion-1].answers[0]);
	$("#answer2").html(quizData[currentQuestion-1].answers[1]);
	$("#answer3").html(quizData[currentQuestion-1].answers[2]);
	$("#feedback").html(quizData[currentQuestion-1].feedback);
}



		<div id="answersAndFeedback">
			<div id="answer1" class="answer-box">Answer 1</div>
			<div id="answer2" class="answer-box">Answer 2</div>
			<div id="answer3" class="answer-box">Answer 3</div>
			<div id="feedback" class="hidden">Feedback goes here</div>
		</div>

Answer 1

将height添加到.answer-box类

.answer-box{
    width: 600px;
    height:400px;
    background-color: white;
    padding: 20px;
    color: #666;
    margin: 10px 0;
    font-size: 0.7em;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    cursor: pointer;
}

然后让.answer-box内的图片填充

.answer-box img {
height:100%;
width:100%;
object-fit:cover;
}

您可以将height的{{1}}和width调整为您的意愿，而不仅仅是.answer-box和600px

然后在标记中添加200px imgs，每个ids。

img

在<div id="answer1" class="answer-box"><img id="img1" src="/someimage.png"/></div>中也有一个varData数组，其中包含img urls。这样的事情。

images

像这样修改{ question:"Which animal would survive in a forest?", answers:["Lion","Frog","Pigeon"], imgs:["/img/lion.png","/img/frog.png","img/pigeon.png"], correctAnswer:2, feedback:"Frogs can live pretty much anywhere except for Antartica and they prefer to live at marshes, ponds,and lakes." }

showQuestion

因此，现在这将更改图片的function showQuestion(){ $("#question").html(quizData[currentQuestion-1].question); $("#img1").attr("src",quizData[currentQuestion-1].imgs[0]); $("#img2").attr("src",quizData[currentQuestion-1].imgs[1]); $("#img3").attr("src",quizData[currentQuestion-1].imgs[2]); $("#feedback").html(quizData[currentQuestion-1].feedback); }并将其设置为src中imgs数组中的值。

Jquery测验 - 使用数组中的图像而不是文本

1 个答案: