{"id":6643,"date":"2025-09-14T16:44:05","date_gmt":"2025-09-14T16:44:05","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=6643"},"modified":"2025-09-14T16:44:06","modified_gmt":"2025-09-14T16:44:06","slug":"mit-app-inventor-shuffle-quiz-app","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/mit-app-inventor-shuffle-quiz-app\/","title":{"rendered":"How to Shuffle Quiz Questions in MIT App Inventor | Easy Tutorial"},"content":{"rendered":"\n

Hello friends, and welcome to Obsidian Soft,<\/p>\n\n\n\n

Today, I will teach you how to add shuffling to your quiz questions.<\/p>\n\n\n\n

This was a feature requested by many people, so I thought that I should do a short video on this topic.<\/p>\n\n\n\n

I will not make a full quiz app as I have already done two quiz tutorials: the movie quiz app and the landmarks quiz app with multiple choices. I will just tell you how to structure your quiz questions, answers, and answer choices, and then do the shuffling.<\/p>\n\n\n\n

However, to show you shuffling at work, I do need to make a testing screen so it will be quick, quite ugly :D, but it will serve the purpose.<\/p>\n\n\n\n

Start a new project. Let\u2019s call it ShuffleApp. Add a label from the user interface. Rename it to quesLbl. Make font bold, font size 18. Duplicate it by selecting it and pressing Ctrl + C & Ctrl + V<\/strong> on the keyboard for Windows and Command + C & Command + V <\/strong>for macOS.<\/p>\n\n\n\n

Rename this one to ansLbl. Duplicate it again. Rename it to choiceLbl1. Duplicate it again. Rename it to choiceLbl2. Duplicate it again. Rename it to choice Lbl3.<\/p>\n\n\n\n

Now, add a button below it. Rename it to nextBtn. And change the text to Next.<\/p>\n\n\n\n

Duplicate the button and rename it to restartBtn. And change the text accordingly.<\/p>\n\n\n\n

Our super simple screen is done, so let\u2019s go to the blocks section. The trick is in structuring this quiz. In our previous quiz tutorials, we had a list of questions, answers, and in the case of the landmarks quiz, an answer choices list. Here we are going to make one grand list.<\/p>\n\n\n\n

So, let\u2019s make a global variable called quizList and assign it an empty list.<\/p>\n\n\n\n

We still need a variable for holding our question number, so make that and assign it the value 1.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Get the screen initialization event and start setting up our quiz.<\/p>\n\n\n\n

Each item in our quiz list will be a list to,o with 3 items.<\/p>\n\n\n\n

    \n
  1. Question<\/li>\n\n\n\n
  2. Answer<\/li>\n\n\n\n
  3. List of answer choices<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
      <\/ol>\n\n\n\n

      Make 3 more questions like this and add to the initialize event. Next, make a procedure that returns a result (the second type of procedure) and call it shuffle.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Next, click on the cog wheel and add an input and rename it to list.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Next, add a make sorted list block from lists. Make sure that you add this exact block.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Now, get the getList block by hovering your mouse over the input list and provide it to from<\/strong>:<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Next, plug in a <= block from math and check if a random fraction is less than 0.5.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      This is a nice and simple way of shuffling lists, and it serves our purpose. But let me add a disclaimer: this is the simplest way, not the most professional. Later, I will show you a professional shuffling method that programmers actually use.<\/p>\n\n\n\n

      So how does this work? The random fraction<\/strong> block gives us a decimal number between 0 and 1. Half the time it will be less than 0.5, and half the time it will be greater than 0.5. We use this 50\u201350 chance to randomly decide which item should come before another one in the list. The result is that the list ends up shuffled.<\/p>\n\n\n\n

      While we are at it, let\u2019s make an empty procedure and call it showQuestion.<\/p>\n\n\n\n

      And call both shuffle and showQuestion in screen1. initialize event.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Now, let\u2019s work on our showQuestion procedure. You have to remember the structure of the quiz. We have a grand quizList in which each item is a 3-item list. So, first, we have to find the quiz question that has to be shown using the questionNum. The item returned by this selection is a 3-item list where the item at index=1 is the question\u2019s text, so set that to the quesLbl.<\/p>\n\n\n\n

      The second item is the answer\u2019s text, so set that to ansLbl.<\/p>\n\n\n\n

      Now, the third item is a list with a  further 3 things in it: our answer choices. So, construct the blocks carefully. Go for the index=3 to get the list of answer choices and then go for index =1 for choiceLbl1, index for choiceLbl2, and index = 3 for choiceLbl3. <\/p>\n\n\n\n

      And put all of this inside an if block from control that checks that questionNum is less than or equal to the length of the grand quizList. Otherwise, we will get a list error.<\/p>\n\n\n\n

      The next button code is simple: we add 1 to the questionNum number and we call the showQuestion procedure.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      The restart button for testing our shuffling is also quite simple. We set questionNum to 1, call the shuffle procedure, and then call the showQuestion procedure.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      So, this is done. You can incorporate this structure in any of your quiz apps and make your quizzes more interesting by adding the random factor.<\/p>\n\n\n\n

      I hope you liked this tutorial. You can also have a look at the video tutorial:<\/p>\n\n\n\n

      \n