display of multiple choice question options fr vertical to horizontal?

Re: display of multiple choice question options fr vertical to horizontal?

by Dominique Bauer -
Number of replies: 0
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

This is not a standard feature of the multiple choice question. However, with the help of some css, you can get close to what you want. Since the css values may need to be adjusted depending of the size of the images, I suggest you put the css in the HTML of the question text. In fact, you can use jQuery instead so that the styling is not erased if you are using the Atto editor. So the HTML of your question text may look like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(".que.multichoice .answer div.r0, .que.multichoice .answer div.r1").css("padding", "330px 40px 0px 0px");
    $(".que.multichoice .answer div.r0, .que.multichoice .answer div.r1").css("height", "400px");
    $(".que.multichoice .answer div.r0, .que.multichoice .answer div.r1").css("display", "inline-block");
    $(".que.multichoice .answer div.r0, .que.multichoice .answer div.r1").css("vertical-align", "top");

    $(".que.multichoice .answer div.r0 > div, .que.multichoice .answer div.r1 > div").css("position", "relative");
    $(".que.multichoice .answer div.r0 > div, .que.multichoice .answer div.r1 > div").css("top", "-330px");
    $(".que.multichoice .answer div.r0 > div, .que.multichoice .answer div.r1 > div").css("left", "5px");
    $(".que.multichoice .answer div.r0 > div, .que.multichoice .answer div.r1 > div").css("cursor", "pointer");

    $(".que.multichoice .answer div.r0 > i, .que.multichoice .answer div.r1 > i").css("position", "relative");
    $(".que.multichoice .answer div.r0 > i, .que.multichoice .answer div.r1 > i").css("top", "-330px");
    $(".que.multichoice .answer div.r0 > i, .que.multichoice .answer div.r1 > i").css("left", "30px");
    });
</script>

Which one of these two foods contains more sodium?

With the HTML code of Choice 1 looking like this:

<img src="https://moodleformulas.org/draftfile.php/5/user/draft/552607326/Image1.png"  width="350" class="img-fluid">
<br>
Greek Yogurt

This is what you get:


The images are clickable, so I changed the cursor to "pointer" (small hand).