interactive quiz system with dynamic scores and results in figma using variables |
Вставка
- Опубліковано 7 вер 2024
- how to create interactive quiz system with dynamic scores and results in figma using variables.
figma file link - www.figma.com/...
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.
See more : figma tips and tricks | figma variables tutorial
/ @curdweb - Наука та технологія
Best Tutorial SO FAR! Thank you
Glad it helped!
Figma is a real programming language resembling RPG and Cobal
you are right.
Really liked the content and it was very usefull
Download figma files from - www.figma.com/@navinwebworld
Solution rocks!!!
Thanks
Please help me
I have a question about the new 2024 updates in Figma, in the prototype
are the figma conditional else if
it isn't become free?? 😢
How can I implement this explanation now? 😢
conditional else if is available in figma free version, easily can implement/use this example below is figma file link
www.figma.com/community/file/1338984231382370065/quiz-systm-with-score-card-using-figma-variables
Thank you
@@curdweb thanks 🌹
Download figma files from - www.figma.com/@navinwebworld