create rudimentary version of multiple choice interface

[tangway]

• [X] going to start with making divs in the return of App() with hardcoded question

• [X] then create a 2 question data structure to display the flag component and the choices

• [X] make choices into buttons which trigger the checking function

• [x] #3

• [x] #6

• [X] make a Next button

  • [x] #7
  • [x] #10
  • [ ] #11

• [x] #8

[tangway]

Encountering problem where I dont know how to dynamically show a flag if I choose to use the current data structure i have in questions.js

const questions = [
  {
    answer: 'Saint Lucia',
    choices: ['Belize', 'Singapore', 'Dominica', 'Saint Lucia'],
  },
  {
    answer: 'Sri Lanka',
    choices: ['Madagascar', 'Comoros', 'Guyana', 'Sri Lanka'],
  },
];

export default questions;

[tangway]

Encountering problem where I dont know how to dynamically show a flag if I choose to use the current data structure i have in questions.js

const questions = [
  {
    answer: 'Saint Lucia',
    choices: ['Belize', 'Singapore', 'Dominica', 'Saint Lucia'],
  },
  {
    answer: 'Sri Lanka',
    choices: ['Madagascar', 'Comoros', 'Guyana', 'Sri Lanka'],
  },
];

export default questions;

fixed this by creating a mapOfFlags that references the react components of the flags:

import StLuciaFlag from './StLuciaFlag';
import SriLankaFlag from './SriLankaFlag';

const mapOfFlags = {
  'Saint Lucia': StLuciaFlag,
  'Sri Lanka': SriLankaFlag,
};

export default mapOfFlags;

and changing App.jsx to:

import questions from './questions';
import mapOfFlags from './components/mapOfFlags';

const App = () => {
  const FlagComponent = mapOfFlags[questions[1].answer];

  return (
    <>
      <div className="flag-area">
        <FlagComponent />
      </div>
      <div className="choices">
        <ul>
          {questions[1].choices.map((c, index) => <li key={index}>{c}</li>)}
        </ul>
      </div>
    </>
  );
};

export default App;