Soy un principiante de React Js. Estoy creando un Portal MCQ y quería mostrar las opciones de mcqs en orden aleatorio.
.js
para los datos, pero luego planeo cambiar a MongoDB.
aquí está el código
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;
Aquí está el archivo de contenido de MCQ
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;