/what-the-element

Learn the names of all the elements in the periodic table.

Primary LanguageJavaScript

What-The-Element?!

About

What-The-Element?! is about learning the periodic table of elements. You have to guess the name of every element.

You also get some additionnal info and external link to learn more about the element you just guessed.

How to Play

To start playing What-The-Element?!, you can visit the game website.

Once you're on the website, choose if you want to play in English or in French (support for other languages are in progress)

You can click on the "START" button or press "Enter" to start the game.

Select any element and type its name.

If your guess is correct, the element will be highlighted in green and you will receive a point.

If your guess is incorrect, you will be given a hint to help you guess the correct name for a symbol.

Structure / TODO

  • Display the periodic table of elements with their symbol
  • Hide the name of element
  • When clicked, display the element in the middle of the screen
  • Add an input field for the user to guess the name of the element
  • Assess the answer given by the user:
  • If OK, color the element and add its name in the table
  • If not, update the input and add a letter
  • Add the possibility to escape the dialog box
  • Add reset button (hard reset)
  • Add score count
  • Add interaction with the "Enter" key
  • Add a start menu
  • Start button animations
  • Convert input to uppercase
  • Add a footer
  • Add a progress bar
  • Add tab navigation on elements
  • Add a number on hints used tracker
  • When element guessed, display summary on hover
  • Block the user from clicking on a other element when guessing
  • Add french mode
  • Adapt to small screens
  • Add a close dialog button
  • Add explore mode (ie add class good-answer to all elements)
  • Calculate ratio between hints and guesses // wrong tries vs good tries
  • Fix bug on hint from random
  • Add a soft reset
  • Add a "click on an element" reminder if user doesn't do anything
  • Add finish screen with hint ratio // like solitaire
  • Add percent complete hover on bar
  • Close input by click outside
  • Add legend with box, with "atomic number" "symbol" "name"
  • Style input field
  • If you used a hint, put put different color

Conclusion

What-The-Element?! is a fun and educational game that can help you learn the periodic table of elements. By playing the game, you can improve your knowledge of the elements and become a better chemist.

Data

Data from:

https://github.com/Bowserinator/Periodic-Table-JSON

http://kemi.fr/base-de-donnees