Tuesday, October 17, 2017

Chinese Characters vocabulary Evaluation which UI

Chinese Characters vocabulary Evaluation which UI


I got the idea of recording quickly which Chinese characters a learner knows or not. To be solid, it absolutely need an autoevaluation by the learner him/herself, who confirm his/her degree of knowledge of the displayed sinograph. Iam cautious but tempted by the 3 levels such as unknow, (partially know,) or well know characters, which sound to be the relevant degrees of lexical knowledge. Below will be some hits about possible roads to walk for clean, accessible UI for Sinograph evaluation. Keywords and some relevant sources will be collected in preparation to later pushes.

Lists UI


I love this view. I enjoyed this efficient, concise listing. This UI allow to state both if 1. you know the sinograph (the ?) ; 2. If you believe it to be important (the ?), in a learning device "what you dont know AND want to study it". Given that the focus is on the most common characters that you all have to study, its simply what you dont know. The ? and ? are there uselessly redundant. The play function is, however, truly handsome.

Table UI

An other more compact way is a grid where you click on items you know. Needing a clean, chartjunk outline, Im interested by a simple but elegant grey ramp of color, with black sinographs in elegant squares with 1px grey borders. Overfly, the sinograph get enlarged. Click: the knowledge status is toggled (data / storedata) which color the background or sinograph accordingly.
At the beggining of the test:
or (without the Zhuyin)
and at the end of the test : 
In html :
????
????

I wonder yet how to toogle this CSS on the fly while saving the collected input (sinograph evaluation status) for long term learning effort within other functions of the apps such as the discovery-focused flying sinographs, the discovery list mode upper, spaced repetition, sentence reading, dictionaries, etc.

Sources:

  • http://webstuffshare.com/demo/CSSNiceMenu/# Elegant buttons (CSS / JQuery)
  • http://swizec.com/code/styledButton/
  • http://www.w3.org/TR/selectors/#selectors td:checked
  • https://developer.mozilla.org/en-US/docs/DOM/Storage
  • http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaitre
  • http://stackoverflow.com/questions/11596837/how-to-change-color-of-checkbox-label-while-toggling-checked-unchecked-state-on
  • http://about.me/hugo.lpz
  • http://about.me/thebabydino
Posted by at
Labels: , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)