This challenge involves designing and implementing a simple interactive prototype that emulates the roll of a 20-sided dice, displaying a random number between 1 and 20 each time it is rolled.

Detailed Instructions

1. Choose Your Tool:
   • Select the tool you will use to implement the dice roll. Options might include Figma (with interactive components), Adobe XD (with prototyping features), HTML/CSS/JavaScript, or any other tool you are comfortable with.
2. Research Random Number Generation:
   • If you are using a prototyping tool, review how to create random interactions or use plugins that support randomness.
   • If you are coding, review how to generate random numbers within your chosen programming language.
3. Design the Dice Interface:
   • Create a simple UI design for the dice roll, including:
     • A button to initiate the roll
     • A display area to show the result of the dice roll
   • Keep the design clean and focused on functionality.
4. Implement the Dice Roll Functionality:
   • Set up your workspace in the chosen tool.
   • Implement the random number generation:
     • Prototyping Tools: Use interactive components or plugins to simulate randomness.
     • Development Tools: Write code to generate a random number between 1 and 20.
   • Connect the roll button to the random number generator and display the result.
5. Test the Implementation:
   • Test the dice roll multiple times to ensure it produces random numbers between 1 and 20.
   • Check for any bugs or issues in the interaction or code.
6. Refine and Enhance:
   • Make any necessary adjustments to the design or functionality based on testing.
   • Consider adding enhancements such as animation effects for the dice roll or additional UI elements for improved user experience.

<aside> 💡 Reflection (Optional): After completing the task, spend 10 minutes reflecting on the experience. Write down what you learned, what went well, and what could be improved.

</aside>

Resources Needed

• Your chosen design or development tool
• Reference materials or tutorials for random number generation in your chosen tool

Expected Outcomes

• A functional prototype that accurately simulates the roll of a 20-sided dice.
• A simple, user-friendly interface for initiating and displaying the dice roll.
• An understanding of how to implement randomness in interactive prototypes or code.

Tips:

• Keep the design minimal to focus on functionality.
• Ensure the random number generator covers the full range from 1 to 20.