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 .jsfile 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;
