{"id":27,"date":"2016-12-20T16:46:14","date_gmt":"2016-12-20T16:46:14","guid":{"rendered":"http:\/\/designedbyashw.in\/blog\/?p=27"},"modified":"2021-07-26T08:41:25","modified_gmt":"2021-07-26T08:41:25","slug":"randomize-questions","status":"publish","type":"post","link":"https:\/\/designedbyashw.in\/blog\/blog\/2016\/12\/20\/randomize-questions\/","title":{"rendered":"Randomize Questions"},"content":{"rendered":"\n

Recently i was faced with a problem wherein, given a list of question, the order in which they were displayed must vary every time it is presented in a webpage. In this article I will illustrate how we can use The Fisher\u2013Yates shuffle<\/b> algorithm<\/a> to solve this problem and dynamically display the order of the questions<\/p>\n\n\n\n\n\n\n\n

The Algorithm:<\/h2>\n\n\n\n
\/\/ To shuffle an array a<\/i> of n<\/i> elements (indices 0..n-1):\nfor<\/b> i<\/i> from<\/b> n<\/i>\u22121 downto<\/b> 1 do<\/b>\n     j<\/i> \u2190 random integer such that 0 \u2264 j<\/i> \u2264 i<\/i>\n     exchange a<\/i>[j<\/i>] and a<\/i>[i<\/i>]\n\n\/\/ -(Source Wikipedia)<\/code><\/pre>\n\n\n\n
Steps:<\/h2>\n\n\n\n
As we need to shuffle only certain items in the page, it would be wise to first group them together. Lets assign a class .random<\/code> to the elements. Here we will also need to identify a parent container which will contain all the shuffled questions. #question-container<\/code><\/p>\n\n\n\n
<!-- index.html -->\n<ul id=\"question-container\">\n <li class=\"random\">Question 1<\/li>\n <li class=\"random\">Question 2<\/li>\n <li class=\"random\">Question 3<\/li>\n <li class=\"random\">Question 4<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n
Now we need to select them in our scripts. We can use jQuery or plain old javascript to do this. Let us also remove the questions once selected from the DOM<\/p>\n\n\n\n
\/\/ shuffle.js\nvar questions = $(\".random\");\nvar container = $(\"#question-container\");\n\nquestions.remove();<\/code><\/pre>\n\n\n\n
Now that the questions don’t exist in the DOM and are selected, lets write the algorithm to shuffle them. We will use the Fisher\u2013Yates shuffle<\/b> algorithm<\/a> to do this.<\/p>\n\n\n\n
\/\/ Fisher\u2013Yates shuffle algorithm\nfor (var i = questions.length - 1; i > 0; i--) {\n var rand_int = getRandomInt(0, i);\n var temp = questions[i];\n questions[i] = questions[rand_int];\n questions[rand_int] = temp\n}<\/code><\/pre>\n\n\n\n
Now our questions array will contain all the questions in a shuffled manner. The getRandom(a,b)<\/code> function is used to get a random number between a and b, inclusive of a and b. You can write the function as below.<\/p>\n\n\n\n
\/\/ Get random integer within a range inclusive of min and max values\n function getRandomInt(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min + 1)) + min;\n }<\/code><\/pre>\n\n\n\n
Now all that is left to complete this is adding the questions back to the paretn container. We can do this using the append()<\/code> function in jQuery (similar functions exist in javascript too).<\/p>\n\n\n\n
for (var i = 0; i < questions.length; i++) {\n container.append(questions[i]);\n}<\/code><\/pre>\n\n\n\n
And we are done. The whole code for this is as follows:<\/p>\n\n\n\n
<!-- index.html -->\n<!DOCTYPE html>\n<html>\n <head>\n   <meta charset=\"utf-8\">\n   <title>Shuffle<\/title>\n <\/head>\n <body>\n   <ul id=\"question-container\">\n     <li class=\"random\">Question 1<\/li>\n     <li class=\"random\">Question 2<\/li>\n     <li class=\"random\">Question 3<\/li>\n     <li class=\"random\">Question 4<\/li>\n   <\/ul>\n <!-- Load Jquery -->\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\" charset=\"utf-8\"><\/script>\n <script src=\"shuffle.js\" charset=\"utf-8\"><\/script>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
and our script file as<\/p>\n\n\n\n
\/\/ shuffle.js\nvar questions = $(\".random\");\nvar container = $(\"#question-container\");\n\nquestions.remove();\n\n\/\/ Fisher\u2013Yates shuffle algorithm\nfor (var i = questions.length - 1; i > 0; i--) {\n var rand_int = getRandomInt(0, i);\n var temp = questions[i];\n questions[i] = questions[rand_int];\n questions[rand_int] = temp\n}\n\nfor (var i = 0; i < questions.length; i++) {\n container.append(questions[i]);\n}\n\n\n\/\/ Get random integer within a range inclusive of min and max values\n function getRandomInt(min, max) {\n   min = Math.ceil(min);\n   max = Math.floor(max);\n   return Math.floor(Math.random() * (max - min + 1)) + min;\n }<\/code><\/pre>\n\n\n\n
Cheers!<\/h2>\n","protected":false},"excerpt":{"rendered":"
Recently i was faced with a problem wherein, given a list of question, the order in which they were displayed must vary every time it…<\/p>\n","protected":false},"author":1,"featured_media":109,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[11],"_links":{"self":[{"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/posts\/27"}],"collection":[{"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":9,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":306,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/posts\/27\/revisions\/306"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/media\/109"}],"wp:attachment":[{"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}