WebApp - Reber Grammar
Budget: €30 – €250 EUR
I need someone who can create this web app for simmulation of non embaded Reber Grammar.
here is the example. It should be same as this link:
https://hnaoufal.github.io/beuth/#/dea
and here is informations about Reber Grammar:
https://cnl.salk.edu/~schraudo/teach/NNcourse/reber.html
simulate and visualize the Reber Grammar (RG) as a Deterministic Finite Automata (DEA). ATTENTION: You should NOT consider the Embedded Reber Grammar (ERG), but only the inner part, the Reber Grammar (RG).
You are to generate random strings first. With the help of the DEA it is easy to generate correct strings. Alternatively, you can also generate incorrect strings that are not recognized. To do this, use the automaton to modify a correct string by creating an incorrect input at a certain point using an edge that does not exist, and replacing it with the correct one.
In a second step, check the input using the DEA.
Application and delivery: a web application will be created, see course syllabus. Web Applications Tutorial: Client-side Web APIs by MDN.
Visualization: Display the DEA as a graph. Display the processing of the input step by step. You should animate the graph (using shape and color) and also show the processing of the input. Finally, the final state and the result (detected or not detected) of the automaton is shown.
There are many possibilities when implementing this in HTML. You can use an SVG graphic, you can use a canvas, you can work with HTML elements or an image map.
Interaction: You can have the application generate correct and incorrect strings as an example. It is also possible to enter a string. The DEA can be executed step by step using a button.
Documentation: Use a separate HTML page, accessible via a link/button from your application, for documentation.
Technical: List all frameworks used and briefly explain (1-3 sentences) what you are using them for. Document any technical specifics of your solution.
Technical: Explain your implementation of the logic. How did you implement the automaton in the code: Data structures and algorithm.
Design: pay attention to meaningful semantics in the color scheme and a clear layout. Follow the human/human-computer interaction (HCI) criteria in interaction design: ISO 9241-11 usability requirements and ISO 9241-110 principles of dialog design: https://de.wikipedia.org/wiki/ISO_9241. Your application should be functional (task appropriateness) and user-friendly (usability), with appropriate feedback and [context-sensitive] help.
Task appropriateness: any buttons that should not be executable at a given time should be clearly disabled. Dialog design should be as linear/simple as possible. I.e. the user should get only the possibilities for interaction at any time, which she then absolutely needs. It must always be clear to the user what will happen next.
Usability: Automate as much as possible. Minimize the necessary user interaction/clicks.
Help: context-sensitive here means spatial (e.g. "rollover help") and temporal (for example, point out the next possible or now probably best interaction step(s)).
Hints: Check out the "AutoSim" simulator under Course Material for inspiration.
Material: Reber Grammar (RG) [and Embedded Reber Grammar (ERG)]: https://willamette.edu/~gorr/classes/cs449/reber.html#top
Please include a regular start and end state (they are not drawn in the link above).
here is the example. It should be same as this link:
https://hnaoufal.github.io/beuth/#/dea
and here is informations about Reber Grammar:
https://cnl.salk.edu/~schraudo/teach/NNcourse/reber.html
simulate and visualize the Reber Grammar (RG) as a Deterministic Finite Automata (DEA). ATTENTION: You should NOT consider the Embedded Reber Grammar (ERG), but only the inner part, the Reber Grammar (RG).
You are to generate random strings first. With the help of the DEA it is easy to generate correct strings. Alternatively, you can also generate incorrect strings that are not recognized. To do this, use the automaton to modify a correct string by creating an incorrect input at a certain point using an edge that does not exist, and replacing it with the correct one.
In a second step, check the input using the DEA.
Application and delivery: a web application will be created, see course syllabus. Web Applications Tutorial: Client-side Web APIs by MDN.
Visualization: Display the DEA as a graph. Display the processing of the input step by step. You should animate the graph (using shape and color) and also show the processing of the input. Finally, the final state and the result (detected or not detected) of the automaton is shown.
There are many possibilities when implementing this in HTML. You can use an SVG graphic, you can use a canvas, you can work with HTML elements or an image map.
Interaction: You can have the application generate correct and incorrect strings as an example. It is also possible to enter a string. The DEA can be executed step by step using a button.
Documentation: Use a separate HTML page, accessible via a link/button from your application, for documentation.
Technical: List all frameworks used and briefly explain (1-3 sentences) what you are using them for. Document any technical specifics of your solution.
Technical: Explain your implementation of the logic. How did you implement the automaton in the code: Data structures and algorithm.
Design: pay attention to meaningful semantics in the color scheme and a clear layout. Follow the human/human-computer interaction (HCI) criteria in interaction design: ISO 9241-11 usability requirements and ISO 9241-110 principles of dialog design: https://de.wikipedia.org/wiki/ISO_9241. Your application should be functional (task appropriateness) and user-friendly (usability), with appropriate feedback and [context-sensitive] help.
Task appropriateness: any buttons that should not be executable at a given time should be clearly disabled. Dialog design should be as linear/simple as possible. I.e. the user should get only the possibilities for interaction at any time, which she then absolutely needs. It must always be clear to the user what will happen next.
Usability: Automate as much as possible. Minimize the necessary user interaction/clicks.
Help: context-sensitive here means spatial (e.g. "rollover help") and temporal (for example, point out the next possible or now probably best interaction step(s)).
Hints: Check out the "AutoSim" simulator under Course Material for inspiration.
Material: Reber Grammar (RG) [and Embedded Reber Grammar (ERG)]: https://willamette.edu/~gorr/classes/cs449/reber.html#top
Please include a regular start and end state (they are not drawn in the link above).