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
  • Наука та технологія

КОМЕНТАРІ • 11

  • @huhu6924
    @huhu6924 3 місяці тому +2

    Best Tutorial SO FAR! Thank you

    • @curdweb
      @curdweb  3 місяці тому

      Glad it helped!

  • @vicspracticetracks7563
    @vicspracticetracks7563 3 місяці тому +1

    Figma is a real programming language resembling RPG and Cobal

    • @curdweb
      @curdweb  3 місяці тому +1

      you are right.

  • @maverickproduction9009
    @maverickproduction9009 9 місяців тому +2

    Really liked the content and it was very usefull

    • @curdweb
      @curdweb  6 місяців тому

      Download figma files from - www.figma.com/@navinwebworld

  • @nihb6578
    @nihb6578 7 місяців тому

    Solution rocks!!!
    Thanks

  • @H_K9980
    @H_K9980 Місяць тому +1

    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? 😢

    • @curdweb
      @curdweb  Місяць тому +1

      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

    • @H_K9980
      @H_K9980 Місяць тому

      @@curdweb thanks 🌹

  • @curdweb
    @curdweb  6 місяців тому

    Download figma files from - www.figma.com/@navinwebworld