how to create interactive quiz system with dynamic scores and results in figma using variables.
In this video will see
- figma local variable
- figma variable mode
- figma pass through layers
- figma assign / apply variables
- figma show/hide features
- figma interactions
- Dynamic score calculations
- Dynamic result of quiz
- figma reusable components
In this video, I have explained how to create interactive and dynamic quiz system using figma variables technique.
- Creating card with question and answer as options like a, b, c
- Selecting right answer will increase / update the quiz score same way if selecting wrong answer it won't impact on the score board.
- While selecting right answer it will display "Right Answer" as well as lock the card.
- Same way if it is wrong answer it will display "Wrong Answer" as well as lock the card.
- Footer having two buttons like "Try again" which will reload / refresh the quiz to play again, and "Result" will show your achievements like if all answers are right "well done", if only few are right "Try Again".
- Here in this Trick and Tips we can reuse the interactions of one card to another using variable mode.
- if we are increasing number of card (Questions) need to just increase / add the mode and pass through mode / switch the mode.
- Score panel will be separate collection as it is impacting on overall Quiz System.
- For score we will create number variable and for result/achievement we will use Boolean variables to show and hide as per the score board.
Comments
Post a Comment