Files

{{#question}}
    <div id="clickable-image-{{uuid}}">
        <p class="clickable-image">Click on the image this many times: {{number}}</p>
        <input name="{{answers_name}}" type="hidden" value="0" />
        <p><img src="{{image_url}}" width="50"></p>
        <p>You have clicked the image <span class="number-clicks">0</span> times.</p>
    </div>
    <script>
     $(document).ready(() => {
         const uuid = `{{uuid}}`;
         const container = $(`#clickable-image-${uuid}`);
         container.find('img').on('click', function() {
             const current = parseInt(container.children('input').val());
             const next = current + 1;

             container.find('span.number-clicks').text(next);
             container.find('input').val(next);
         });
     });
    </script>
{{/question}}

{{#submission}}
    <p>You have clicked the image <span class="number-clicks">{{submitted}}</span> times.</p>

    {{#feedback}}
        <p><i>{{feedback}}</i></p>
    {{/feedback}}
{{/submission}}

{{#answer}}
    <p>Correct number of clicks: <span class="number-clicks">{{correct}}</span>.</p>
{{/answer}}