Tuesday, July 17, 2012

Memory test in Html/Javascript/jQuery

In this post I want to share a little html-page/script to help view in particular the glance.

Below you can see the test, choose in the form the number of rows, columns and the time than press enter or click start. After that you have $time seconds to memorize the letters and numbers than they disappear.
Now you have the same table empty, enter in every cell the letters you remember and press enter or click check to view the results.

Features of this little html page/script:
  1. Automatic cursor positioning at the first cell;
  2. Automatic upper case for letters;
  3. Automatic go to next cell;
  4. Right answer report with percentage;
  5. Button enabling functions - easy user experience;
  6. Keyboard shortcuts: tab, shift-tab and enter;
  7. Ultra quick test without changing settings, just always press enter to execute a new test and check;
  8. Completely customizable: rows, columns and time;
  9. Error highlighted in red;
  10. Page remembers the settings using parameters in the URL (?row=X&col=Y&time=Z);
  11. Very little script;
  12. Multiple browser compatibility.
Technology stack:
  • Html
  • Javascript
  • jQuery

Row Number: Column Number:
Time (seconds):

No comments:

Post a Comment