I'm a React Js Beginner. I'm creating a MCQ Portal and wanted to display mcqs options in random order.
- Right Now I'm using
.js
file for data But later planning to shift to MongoDB. - I'm using URL Parameter to retrieve specific MCQ. Is there a way to shuffle array?
Here's the code
import React from 'react';
import mcqContent from './mcq-content';
const MCQPage = ({match}) =>{
const reqUrl = match.params.name;
const mcqData = mcqContent.find(mcqData => mcqData.m_slug === reqUrl);
const correctMcq = mcqData.m_alternatives[0];
function shuffle(array) {
let currentIndex = array.length, randomIndex;
// While there remain elements to shuffle...
while (currentIndex !== 0) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]];
}
return array;
}
const optionsArray = mcqData.m_alternatives
const shuffledArray = shuffle(optionsArray)
return (
<>
<h1>{mcqData.m_title}</h1><br/>
<h3>{mcqData.m_question}</h3>
{shuffledArray.map((paragraph, key) => (
<p key={key}>{paragraph}</p>
))}
<h4>Answer: {correctMcq}</h4>
</>
);
};
export default MCQPage;
Here's the MCQ Content File
const mcqs = [
{
"_id":1,
"m_title":"Which company is the most valueable in the world?",
"m_slug":"which-company-is-the-most-valueable",
"m_question":"Which company is the most valueable in the world?",
"m_alternatives":["Apple","Google","Microsoft"],
"m_number":"Gen-Know-1",
"m_subject":"General Knowledge",
},
];
export default mcqs;