Adding several images to a quiz
1. Upload all the images to Files & Uploads and note the image’s static code displayed in the studio.
2. Inside the quiz component, insert the following HTML code.
<p><b>Add question here?</b><br/>
<i>Select the correct options below.</i></p>
<div class="row">
<div class="col col-span-6">
<problem>
<optionresponse>
<img src="/static/SampleImage1.jpg" alt="Sample1"/>
<optioninput options="('Option1','Option2','Option3','Option4')" correct="Option1"/>
</optionresponse>
</problem>
</div>
<div class="col col-span-6">
<problem>
<optionresponse>
<img src="/static/QuizSephora2.png" alt="Cream" height="160"/>
<optioninput options="('Option1','Option2','Option3','Option4')" correct="Option2"/>
</optionresponse>
</problem>
</div>
<div class="col col-span-6">
<problem>
<optionresponse>
<img src="/static/QuizSephora3.jpg" alt="Cream"/>
<optioninput options="('Option1','Option2','Option3','Option4')" correct="Option3"/>
</optionresponse>
</problem>
</div>
<div class="col col-span-6">
<problem>
<optionresponse>
<img src="/static/QuizSephora4.jpg" alt="Cream" height="140"/>
<optioninput options="('Option1','Option2','Option3','Option4')" correct="Option4"/>
</optionresponse>
</problem>
</div>
</div>Elements in bold are customizable depending on the image and the size.
Elements in italics are customizable as you wish.
3. Then insert right after the quiz an “Raw HTML” component with the following code.
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://s3-eu-west-1.amazonaws.com/videofrance/fb-grid_V2.css">
</head>Learner platform display:
