- added style docs

- question system docs
- added inner structure docs

dev/docs/frontend/core/communication.md

@@ -21,6 +21,9 @@ The setup file sets up some interceptors
 
 The communication layer is divided into smaller files for specific data. The name of the files tells you what data can be send/received which this sub-layer.
 
+Normally every file in the communication layer has a co-part in the backend e.g. `frontend/src/communicationLayer/pLangs.Layer.ts` has a controller in the backend named `PlangsController.cs`.
+If this is not the case then the splitting might be bad and should be reconsidered (e.g. the controller in the backend handles too many different data).
+
 All functions are async and must be awaited (promise).
 Because we use redux the actions of redux will trigger the invocation of these functions for us.
 Normally redux can't handle promises but with the redux middleware [redux-promise-middleware](../overview/usedFrameworks.md##redux-promise-middleware)

dev/docs/frontend/core/questionSystem.md

+# Question System
+
+If we refer to *question* we actually mean just some text that is a task, e.g. the exercise task
+
+[The real reason for that is that there was a survey feature planned and a survey has questions and we only wanted 1 parser for the question syntax and the exercise task syntax and the question syntax was *bigger*
+We never changed the name of the files... TOOD??]
+
+The `XXXGuide` files are guides to the specific syntax for some texts, currently there are
+
+- `frontend/src/questionSystem/exerciseQuestionSyntaxGuide.md` which describes the syntax of the exercise tasks
+- `frontend/src/questionSystem/testSyntaxGuide.md` which describes the syntax of the tests
+
+
+The file `frontend/src/questionSystem/surveySyntaxParser.ts` contains the parser for the exercise question [truly bad written and not in immutable style!! but works for now...]
+
+For the test syntax there is a *parser* function for the test syntax in `frontend/src/helpers/convertersAndTransformers.ts > convertTestProtocol` [TODO maybe cleanup and move the question syntax parser inside the helpers and let the folder for guides??]
+
+## Modified markdown parser
+
+Because we want the exercise task to handle multiple variants (e.g. markdown/pdf/plain text) one need to specify that
+
+For markdown we want *Latex-Math* code which is a bit tricky because `x_2 + y_2` is valid *latex* but markdown interpret the `_ ... _` as italic code
+
+This is the reason why we needed to modify the `marked` parser a bit ...
+
+
+## Assets (images, ...)
+
+Another thing to note is that we can't use regular links for e.g. images (because they are stored as blobs in the db and not as a file) so there is no link for an image
+The solution is to use a pattern `asset://[name]` so be able to reference an image
+The pattern is then resolved if the image from the server is received and a blob is created which has a local url
+
+## Code block languages
+
+There are some code block langs supported for highlighting, see [adding markdown lang](../tutorials/addingMarkdownLang.md) which are supported and how to add one
+
+## JsScripts
+
+Because html is allowed in the markdown (e.g. to enable images) one could try to include a js script (to do some bad things...)
+
+The last test indicated that react filters this somehow (i guess because we use `dangerouslySetInnerHTML`)

dev/docs/frontend/overview/innerStructure.md

+# Inner structure
+
+The *inner* structure of the app is located in `frontend/src/`
+
+- [communicationLayer](../core/communication.md) the communication layer, functions to send/receive data
+- `components` [components tutorial](../tutorials/components.md) contains all components of the app
+- `helpers` a collection of helper functions, every file contains functions for a specific data/problem
+- `questionSystem` contains files for the [question system](../core/questionSystem.md), the *questions* are the text for the exercise description
+- `state` contains files for redux [redux tutorial](../tutorials/redux.md)
+- `styles` contains some global styles for the app, see [styles tutorial](../tutorials/styles.md)
+- `types` contains all *business* logic types (our types for our data), actually not well structured... [TODO??]
+- `validation` contains files/functions for validation, see [validation](../tutorials/validation.md)
+	- [not part of helpers because it feels more specific than helper functions]
+- `allStyles.styl` contains all style files, see [styles tutorial](../tutorials/styles.md) why
+- `app.tsx` the main site component, see [workflow](workflow.md)
+- `constants.ts` some constants for the whole app
+- `global.d.ts` defines (some) functions definitions e.g. *require*
+- `index.tsx` the real root component of the app
+- `routerHistory.ts` some functions/listeners for the router history
+- `setup.ts` some setup stuff, see [setup](../core/setup.md)
+

dev/docs/frontend/overview/readme.md

@@ -62,3 +62,5 @@ The frontend has some special files and folders which are explained here
 - `webpack.config.dist.js` the webpack config file for deployment
 - `webpack.config.js` the webpack config file for developing
 	this is never referenced only `webpack.config.dist.js` so the right one should be chosen depending on the context
+
+Because the sources of the app are mainly located in `frontend/src/` you can read more about the *inner* structure here [inner structure](innerStructure.md)
\ No newline at end of file

dev/docs/frontend/overview/workflow.md

@@ -6,3 +6,4 @@ Basic workflow, components, nested components, redux, async rendering & redux (a
 
 where is the main entry point, what is called, ... login ...
 
+tsx vs ts
\ No newline at end of file

dev/docs/frontend/tutorials/components.md

 # Components
 
+In React basically everything that is *viewable* is a component (or can be).
+
+The idea of a component is that is reusable e.g. 
 
 ## components
 

dev/docs/frontend/tutorials/styles.md

+# Styles
+
+
+We use [stylus](http://stylus-lang.com) because we can omit semi-colons and use some neat functions, e.g. string interpolation for calc, [lighten](http://stylus-lang.com/docs/bifs.html#lightencolor-amount), darken, ...
+
+css file = `.styl` file
+
+## Usage
+
+So we use separated `.styl` files across the app and we let webpack bundle them to one css file via the `ExtractTextPlugin`
+
+A special webpack loader `stylus-loader` translates the `.styl` file syntax into real css syntax in memory
+
+## Global styles
+
+There are some global styles that are mean to be used across the app, these are located in `frontend/src/styles/`
+
+- `behaviours.styl` contains styles for behaviors [TODO rename to behavior...]
+- `common.styl` contains variables and rules for various things
+- `fixes.styl` contains rules that should fix some other rule (e.g. in some browsers)
+- `styles.ts` contains variables (should have the same value as in `common.styl`) so that they can be accessed by js
+
+## Local styles
+
+Every component can have it's own styles, they should be located as close as possible to the component
+
+If the component (parent component) has sub component which use the same style this is also ok, then the style file is located next to the parent component
+
+
+## Why no css modules [info]
+
+[react css modules](https://github.com/gajus/react-css-modules)
+
+We first started this but the autocompletion is too bad and it feels bad somehow and it cannot be debugged well
+In the browser you cannot inspect (or change?) the rules if running the web dev server
+
+
+## Adding style files
+
+If you want to add rules to an existing file there is nothing you need to take care of (only don't use rule names twice as always)
+
+[We first started by a basic approach every style file imported the variable file if needed
+This leaded to a css file where the variables where copied for every import
+Because the variables are inside teh `common.styl` file (which is the biggest css file) we got a really large css file
+To fix this we declared a file `frontend/src/allStyles.styl` that contains references to all `.styl` files and thus all files are connected --> can use the variables and no rules were copied or duplicated
+Because webpack only respect/include files that were required somehow we required the `allStyles.styl` file in `frontend/src/index.tsx`, the root component
+]
+
+- To add a new css file (lets say the name is `my.styl`) create the file & add your rules
+- open the file `frontend/src/allStyles.styl` and add a new statement importing your file
+
+```styl
+@import "path/to/my.styl"
+```
+
+**Please make sure the order of the files is kept in sync with the file tree view (so if you expand the file tree the order from top to down should be the same in the file tree and the `allStyles.styl` file)**
+

dev/docs/frontend/tutorials/validation.md

+# Validation
+
+Only for frontend
+
+how to for dialogs...
\ No newline at end of file