Decision behind image

#1

Is it possible in Epicenter or Flow.js to have images as decisions, so that a player is presented with several pictures and that the one he/she chooses becomes a decision?

#2

Hi Tim,

There’s different ways to do this. One simple method is to just radio button inputs, with pictures for labels. Clicking the picture by the radio button will change the selection. Use CSS to hide the radio button itself. (I didn’t bother to do this in my example).

Here’s some sample code.

model.eqn:

D Product Selection = 1

index.html:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
        <script src="//forio.com/tools/js-libs/2.9.1/epicenter.min.js"></script>
        <script src="//forio.com/tools/js-libs/flow/latest/flow.js"></script>

        <script>
        $(function() { Flow.initialize(); });
        </script>
        <style>
        
        </style>
        
    </head>
    <body data-f-model="model.eqn">

        <P>Current product selection is <span data-f-bind="Product Selection"><span>.   Choose a new product.</p>

        <input type="radio" data-f-bind="Product Selection" value="1" id="cherryRadioBtn">     
           <label for="cherryRadioBtn">
              <img height="100" width="100" src="https://image.shutterstock.com/image-vector/vector-cherry-fresh-fruit-natural-600w-1052752286.jpg">
           </label> <br>
        
        <input type="radio" data-f-bind="Product Selection" value="2" id="blueberryRadioBtn">  
           <label for="blueberryRadioBtn">
              <img height="100" width="100" src="https://image.shutterstock.com/image-photo/top-view-fresh-ripe-blueberries-600w-1390315085.jpg">
            </label> <br>
        
        <input type="radio" data-f-bind="Product Selection" value="3" id="appleRadioBtn">     
           <label for="appleRadioBtn">
              <img height="100" width="100" src="https://image.shutterstock.com/image-vector/vector-red-apple-icon-600w-659128897.jpg">
            </label> <br>

    </body>
</html>

Output:
fruit

#3

That’s great, thank you Will. It worked!