3

Mi idea era hacer un juego de cartas de preguntas y respuestas donde al clickear en un botón te salga una pregunta al azar en un modal, hasta ahí funciona todo. Mi pregunta es ¿Como puedo hacer para que la pregunta que ya salió no vuelva a aparecer? por ejemplo si me sale la pregunta 3, que no vuelva a aparecer en todo el juego.

const Arraynaranja = [
    {
        pregunta: "Pregunta1",
        condicion: "Respuesta1",

    },
    {
        pregunta: "Pregunta2",
        condicion: "Respuesta2",
    },
    {
        pregunta: "Pregunta3",
        condicion: "Respuesta3",
    }
  ];

export function Naranja() {
    const [estadoModal1, cambiarEstadoModal1] = useState(false)
    const [index, setIndex] = useState(0);

  function openmodal(){
    changeNaranja();
    abrirmodal1();
  }

  function changeNaranja() {
    let newIndex = Math.floor(Math.random() * (Arraynaranja.length - 0) + 0);
    setIndex(newIndex);
  }
  function abrirmodal1(){
    cambiarEstadoModal1(!estadoModal1)
  }

  const audio = new Audio(sonidocarta)


  function abrirysonar(){
    openmodal();
    audio.play()
  }

    return (
        <div>
        <button className="btnnaranja" onClick={abrirysonar}><IoIosBody/></button>

        <ModalNaranja
        estado={estadoModal1}
        cambiarEstado={cambiarEstadoModal1}
        titulo="Prenda"
        
      >
        <Contenido>
          <h1>{Arraynaranja[index].pregunta}</h1>
          <p>{Arraynaranja[index].respuesta}</p>
        </Contenido>
      </ModalNaranja>
        </div>
    )
}

Gracias de antemano a todos los que respondan

2
  • 2
    Puedes usar un array auxiliar, copia del principal, para usarlo y del que ir eliminando las preguntas a medida que vayan saliendo... el 3 nov. 2022 a las 14:01
  • Como podría hacerlo? soy relativamente nuevo en react y es la primera vez que intento una cosa así. Muchas gracias el 3 nov. 2022 a las 14:11

2 respuestas 2

3

Propuesta

Crear 2 estados uno para el array de preguntas (inicializado con el array preguntas) y otro para la pregunta que se va a mostrar randomCard (inicializado con carta blanca):

const [preguntas, setPreguntas] = React.useState(preguntas_);
const [randomCard, setRandomCard] = React.useState({condicion:'start'});

Luego una función de ayuda que obtiene el index aleatorio newIndex tal cual la propones y un método splice para eliminar del arreglo preguntas la carta (pregunta) con index aleatorio:

function getRandomCard(){
      let newIndex = Math.floor(Math.random() * (preguntas.length - 0) + 0);
      let removed = preguntas.splice(newIndex,1);
      return  removed[0];
    }

Además esta función regresa el elemento eliminado, de tal forma que podemos hacer el set de randomCard con este elemento eliminado y mostrarlo despues de que el usuario de click en el botón:

function clickme(){
      setRandomCard(getRandomCard());
      setPreguntas([...preguntas]);
    }

Finalmente hacemos el set del estado preguntas con el resto del estado preguntas (notese que este arreglo va a cambiar en cada click del botón debido al uso del método splice en el mismo scope).

Aquí un demo:

const preguntas_ = [
    {
        pregunta: "Pregunta1",
        condicion: "Respuesta1",
    },
    {
        pregunta: "Pregunta2",
        condicion: "Respuesta2",
    },
    {
        pregunta: "Pregunta3",
        condicion: "Respuesta3",
    },
     {
        pregunta: "Pregunta0",
        condicion: "Respuesta0",
    },
    {
        pregunta: "Pregunta4",
        condicion: "Respuesta4",
    },
    {
        pregunta: "Pregunta5",
        condicion: "Respuesta5",
    }
  ];
  


function App(){
  const [preguntas, setPreguntas] = React.useState(preguntas_);
  const [randomCard, setRandomCard] = React.useState({condicion:'start'});
  
  function getRandomCard(){
  let newIndex = Math.floor(Math.random() * (preguntas.length - 0) + 0);
  let removed = preguntas.splice(newIndex,1);
  return  removed[0];
}


function clickme(){
  setRandomCard(getRandomCard());
  setPreguntas([...preguntas]);
}
return (
  <React.Fragment>
    <div style={{ border: '1px solid rgba(0, 0, 0, 0.5)', width:'100px'}}>{randomCard.condicion}</div>
    <button onClick={clickme}>Intercambio de carta</button>
    <div style={{ border: '1px solid rgba(0, 0, 0, 0.5)'}}>{preguntas.map(e=>e.condicion)}</div>
  </React.Fragment>
)
}


ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Método Splice

1
  • 1
    Me ayudo un montón esto. Muchas gracias el 7 nov. 2022 a las 13:23
1

Puedes tener un arreglo o un objeto en el que guardes o marques los índices de las preguntas que ya aparecieron.

Para facilitar la generación del número aleatorio, genera una lista con los índices que sí están disponibles y el número aleatorio en base a su longitud.

Algo así:

const preguntas = [
    {
        pregunta: "Pregunta1",
        condicion: "Respuesta1",
    },
    {
        pregunta: "Pregunta2",
        condicion: "Respuesta2",
    },
    {
        pregunta: "Pregunta3",
        condicion: "Respuesta3",
    }
  ];

yaPreguntado = {}

function indicesDisponibles(){
    return preguntas.map((pregunta, indice) => yaPreguntado[indice] ? -1 : indice).filter(indice => indice >= 0) 
}

function elegirAleatorio(arreglo){
    indice = Math.floor(Math.random() * indices.length)
    return arreglo[indice]
}

function mostrarPregunta(){
    indices = indicesDisponibles()
    newIndex = elegirAleatorio(indices)

    yaPreguntado[newIndex] = true
    console.log(preguntas[newIndex])
}

console.log(indicesDisponibles())
mostrarPregunta()
console.log(indicesDisponibles())
mostrarPregunta()
console.log(indicesDisponibles())
mostrarPregunta()

Solo resta adaptarlo a tu código.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.