Randomising Values In Multiple Arrays

Question

Functionality:

I have a list of questions from 4 different categories, and I intend to ask 1 random question from each different categories. Hence in total, I will have 4 questions that will display 1 random question from each different category.

The flow as follows:

CAT A= ["QA1", "QA2", "QA3", "QA4"]

CAT B= ["QB1", "QB2", "QB3", "QB4"]

CAT C= ["QC1", "QC2", "QC3", "QC4"]

CAT D= ["QD1", "QD2", "QD3", "QD4"]

Q1 : will show the randomised question from CAT A

Q2 : will show the randomised question from CAT B

Q3 : will show the randomised question from CAT C

Q4 : will show the randomised question from CAT D

Issue:

At this point, I have only managed to randomised all questions in a single pool, meaning, I put all the questions from different category into a single array. And append/display the randomised question to a single .

Hence, I am currently stuck on how am I able to randomised the pool of questions from each category and display to the related question .

I would therefore, need to ask for some help and guidance on how to achieve that..thanks

Code:

var GameQuestion = ["A??", "B??", "C??", "D??"];

var GamePage_question_list = [];

var
  random_Question;

function showMediShieldQuestion() {

  //Display random question
  random_Question = Math.floor(Math.random() * GameQuestion.length);

  GamePage_question_list.push(random_Question + "");

  $("#Game_question").html(GameQuestion[random_Question]);
}

<!-- Original Question -->
<div id="Game_question" style="position:absolute; z-index:99; top:750px; left:160px; margin:auto; color:#FFFFFF; font-size:60px; font-family: Calibrib; width:800px; text-align: center;"></div>

< script src="javascript/jquery-1.11.3.min.js">
  < /script>
    <script src="javascript/jquery - ui - 1.10.3.min.js "></script>