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 iPhone mobile app prototype, drag a Dynamic Panel into the center of the canvas.
  2. Add 5 additional panels by clicking on the ‘+’ icon.
  3. 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
    • interactive-prototypes-random-content-ui-assets-images
  4. Then, drag an Ellipse widget to the canvas, followed by another Image widget and a Button.
    • Place the Ellipse on top of the Dynamic Panel.
    • Place the Image at the top of the canvas and add an image that represents an app logo.
    • Place the Button at the bottom of the canvas and rename it “Roll the Dice”.
    • interactive-prototypes-random-content-UI-assets
  5. Go to the Variables palette, create a new variable and name it “Roll”. 
    • interactive-prototypes-conditions-variables
  6. Select the Button and go to the Events palette.
    • Add an “On Tap” + “Set Value” event, selecting the variable. 
    • At the bottom of the Events dialog, select “Calculated”. The Expression builder will appear. 
    • Drag the “Round” function to the first term.
    • Drag the “Random” constant to the next term, followed by the “Multiply” function and then write ‘5’ in the next term.
    • Drag the “Plus” function to the next term.
    • Write the number ‘1’ then finally ‘0’ in the last term.
    • Click “OK”.
    • interactive-prototypes-random-content-expressions
    • interactive-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.
    • At the bottom of the Events dialog, tick “Background” and change the color to black.
    • Click “OK”.
    • Set these events to “WITH previous”.
  8. Copy the last event you created.
    • This time, ensure that the linking option is set to “Time AFTER previous started” at 300 ms.
  9. On the right of this event, select the “Add Event” option and add an “On Tap” + “Set Active Panel” event, selecting Panel 1.
    • Add a “Flip horizontal” transition effect at the bottom.
    • Click “OK”.
    • Now, add a condition by selecting the “add condition” link on the left of this event. The Condition builder will appear.
    • Drag the “Equals” function to the conditional expression.
    • Go to the Variables tab and drag the variable to the left term.
    • Write ‘1’ in the term on the right.
    • Click “OK”.
  10. 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).
    • interactive-prototypes-random-content-events

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

You can download our example here.