GameWordSearch - Platunico Martes de Reactjs

La implementación de juegos en las estrategias de formación virtual son una buena opción si queremos captar la atención de usuarios y motivarlos para aprender acerca de un tema específico. Los expertos en la materia argumentan que la mejor forma de hacer que los usuarios aprendan es conseguir que se diviertan aprendiendo.

Es por eso que hemos desarrollado un serie de juegos de fácil implementación, que podemos agregar a nuestras experiencias virtuales de aprendizaje. <GameWordSearch> es un juego de sopa de letras que te da la flexibilidad de modificar a tu gusto, para implementar actividades didácticas en tus cursos virtuales. Te presentamos un ejemplo de cómo luce este componente en una implementación simple, para jugar, selecciona horizontal, vertical o diagonalmente las letras que deberán formar alguna de las palabras en la lista izquierda:

Para implementar este componente usando nuestra librería unc-react-creator basta con instancia el componente <GameWordSearch> y pasar cómo parámetros los siguiente valores:

words: Un arreglo con las palabras que se formarán en la sopa de letras.

size: El tamaño (cantidad de letras por fila y/o columna).

checkWord: una función callback en la cual se entrega cómo parámetro la palabra que ha sido seleccionada por el usuario, permitiendo validar si la palabra está o no en conjunto de palabras a buscar. A continuación presentamos un ejemplo de implementación de este componente:

import React, { useState } from 'react';
import { render } from 'react-dom';
import { GameWordSearch, UDScalable } from 'unc-react-creator';
import classNames from 'classnames';

import './assets/css/default.styl';
import './assets/css/C02.styl';
import 'animate.css/animate.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';

const words = [
  'Seguridad',
  'Salud',
  'Accidente',
  'Incidente',
  'Arl',
  'Eps',
  'Política',
  'Emergencia',
  'Brigada',
  'Alerta',
  'Alarma',
  'Enfermedad',
  'Protección'
];

const App = () => {
  const [found, setFound] = useState(words.map((word) => ({ word, found: false })));

  return (
    <div className='row no-gutters h-100'>
      <div className='col-md-4 d-flex align-items-center justify-content-center flex-column'>
        {found.map((obj, idx) => (
          <div
            key={idx}
            className={classNames('unc-word', { found: obj.found })}
          >
            {obj.word}
          </div>
        ))}
      </div>
      <div className='col-md-8 d-flex align-items-center justify-content-center'>
        <UDScalable width={560} height={560}>
          <GameWordSearch
            words={words}
            size={14}
            checkWord={(word) => {
              const ftemp = [...found];
              if (ftemp.find((obj) => obj.word === word).found) return;

              ftemp.find((obj) => obj.word === word).found = true;
              setFound(ftemp);
            }}
          />
        </UDScalable>
      </div>
    </div>
  );
};

render(
  <App />,
  document.getElementById('app')
);

Atrévete a realizar implementaciones de este juego interactivo, y personalízalo para ofrecer diferentes didácticas basadas en este popular juego.