0

I'm a React Js Beginner. I'm creating a MCQ Portal and wanted to display mcqs options in random order.

  1. Right Now I'm using .js file for data But later planning to shift to MongoDB.
  2. 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;
Aly
  • 321
  • 1
  • 4
  • 15

0 Answers0