make Modal for hints and bonus questions

[tangway]

• [x] commit current code and make a new branch to work on modal feature
• [x] #19
• [x] #22
  • hint modal appears only on wrong answer so app needs a state to check on. this could be the correct state
  • it has to keep state of which hint has been displayed and persist that when it's displaying the next hint as i want them all the hints to be on the same page
• [x] #23
• [x] #25
  • this helps to keep the old code intact so that i can switch back to it if i want to develop a multi-question version
  • makes switching between them easy with just a boolean toggle
• [ ] #24
• [ ] #27
• [ ] #38

[tangway]

make this component modular so that it can be reusable for hints and bonus qns and also if it doesnt work out for the flow of the game it can be removed with more ease

[tangway]

• looking at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#examples to see how i can use the <dialog> tag. decided to use it as:

  • it is specifically created for dialog boxes and other interactive elements so it's suitable for modals
  • it comes with a .showModal() method
  • and it has built-in accessibility features including being able to press ESC key to close it
  • it also has focus management which is what a modal needs.

• the only downside to using it is older browsers do not support it, for eg. IE and older versions of FF and Safari

  • FF and Safari only implemented this in 2022 March, Chrome did it in 2014.
  • https://caniuse.com/dialog shows 96.25% of global users' browsers support it. even https://caniuse.com/css-grid is at around 98% and flexbox is at 98.5% so the last percentages are hard to get to.
    • this site is great as they show u graphs of usage too
  • still trying to figure out the examples for dialog and how to use it https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal

[tangway]

to use the .showModal() and .close() methods from the HTMLDialogElement interface you have to manipulate the DOM but this does not fit the React paradigm as you risk introducing inconsistencies between the virtual DOM (the representation of the page stored in memory managed by React) and the real DOM (what's actually displayed in the browser window). These inconsistencies can cause unexpected behaviors, bugs, and poor performance.

a suggested workaround is to use useRef to manipulate the DOM as shown here: https://medium.com/@bomber.marek/how-to-use-dialog-in-react-easy-modals-tooltips-81e44d570c8a

[tangway]

in the article linked above it also describes how using React.createPortal is more cumbersome than using the dialog element:

---

ReactDOM.createPortal vs dialog

Before the

element, creating modals in React was a bit more complex. The most common and correct way was to use ReactDOM.createPortal.

This API allows you to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

In the context of modals, ReactDOM.createPortal is used to append the modal component directly to the body element or another container outside the main React application. Doing this avoids CSS stacking context issues and makes the modal appear on top of other elements.

However, using ReactDOM.createPortal requires you to manage the state of the modal (whether it's open or closed) and handle the appending and removing of the modal component from the DOM. This adds unnecessary complexity and might cause additional re-renders.

On the other hand, the

element simplifies this process since it’s a native HTML solution that doesn’t require any additional state management or DOM manipulations.