Simulating random content

With Justinmind, you can create a prototype that simulates random content.interactive-prototypes-dice-random-content
To simulate random content in your prototype, follow the steps below:

  1. In a new mobile prototype, drag a Dynamic Panel into the center of the Canvas. Add 5 additional panels by clicking on the ‘+’ icon.
  2. Double click on the Dynamic Panel to edit its contents. Choose an image for each panel, (in our example each image represents a side of the die).interactive-prototypes-random-content-ui-assets-images
  3. Then, drag an Ellipse widget to the Canvas, followed by another Image widget and a Button. Align them to match our example.interactive-prototypes-random-content-UI-assets
  4. Go to the Variables palette, create a new variable and name it “Roll”. Give it a default value of “0”.interactive-prototypes-conditions-variables
  5. Select the Button and create an “On Tap” + “Set Value” event, selecting the variable as the target of the action. For the value, click the ‘Calculated’ radio button and the ‘Add Expression’ text. You’ll see the Calculated Expression builder appear.
  6. In the builder, first drag the “Round” function to the open space in the expression. Drag the “Random” constant to the next open space, followed by the “Multiply” function and then type “5” in the next space. Drag the “Plus” function to the next open space, type the number “1” then finally “0” in the last term.interactive-prototypes-random-content-expressionsinteractive-prototypes-dice-random-content-condition-animation
  7. Back in the Events palette, right-click on the event you have just created select the “Add action after selected”. Add an “On Tap” + “Change Style’ event, selecting the Button as the target of the action. For the style change, change the “Background” color to gray. Change the event timing to “WITH previous”.
  8. Create another “On Tap” + “Change Style” event for the Button, this time leaving the “Background” color style as default. Change the event timing option to “Time AFTER previous started” at 300 ms.
  9. Back again in the Events palette add an “On Tap” + “Set Active Panel” event, selecting Panel 1 as the panel to be set as active. Give it “Flip horizontal” transition effect.
  10. Now, add a condition by selecting the “add condition” link next to this event. You’ll see the Conditional Expression builder appear. In the builder, drag the “Equals” function to open space in the expression. Then, go to the Variables tab and drag the variable to the leftmost open space. Type “1” in the space on the right.
  11. Repeat step nine for the remaining panels, ensuring that each condition contains the right number, (i.e. 2 for Panel 2, 3 for Panel 3, and so on). Here’s how your Events Palette should look:interactive-prototypes-random-content-events

And that’s it! Click “Simulate” to simulate your content!

You can download our example here.