i18n/en.ts

@@ -295,6 +295,7 @@ export const lang_en: LangObj = {
   "Program": "Program",
   "The test protocol exceeded the character limit and was truncated. However your test can still pass because character limit is only used to limit the memory used to store the test result. New lines characters are counted as 4 characters. There are some characters (~100) reserved for header data and each test protocol line consumes some additional characters (depending on the protocol entry type)." : "The test protocol exceeded the character limit and was truncated. However your test can still pass because character limit is only used to limit the memory used to store the test result. New lines characters are counted as 4 characters. There are some characters (~100) reserved for header data and each test protocol line consumes some additional characters (depending on the protocol entry type).",
   "Load full output" : "Load full output",
+  "Test syntax": "Test syntax",
 
   "Test content read timeout" : "Test content read timeout",
   "Exit code mismatch" : "Exit code mismatch",

i18n/i18nRoot.ts

@@ -299,6 +299,7 @@ export interface LangObj {
   "Program": string
   "The test protocol exceeded the character limit and was truncated. However your test can still pass because character limit is only used to limit the memory used to store the test result. New lines characters are counted as 4 characters. There are some characters (~100) reserved for header data and each test protocol line consumes some additional characters (depending on the protocol entry type).": string
   "Load full output": string
+  "Test syntax": string
 
   "Test content read timeout": string
   "Exit code mismatch": string

src/components/siteSideMenu/menu.tsx

@@ -14,6 +14,7 @@ import {Icon} from "semantic-ui-react";
 import {SimpleDividerWithSpace} from "../helpers/simpleDividerWithSpace";
 import {SimpleVDivider} from "../helpers/simpleVDivider";
 import {getI18n} from "../../../i18n/i18nRoot";
+import {markdownSiteTestSyntaxGuide} from '../../constants'
 
 //const css = require('./styles.styl');
 
@@ -250,6 +251,19 @@ class menu extends React.Component<Props, any> {
               </div>
             }
 
+
+            <div>
+              <Link to={constants.markdownSiteTestSyntaxGuide} target="_blank" onClick={() => this.linkClicked()}>
+                <Icon size="huge" name='book'/>
+                <span>
+            {
+              getI18n(this.props.langId,'Test syntax')
+            }
+            </span>
+              </Link>
+            </div>
+
+
           </div>
         </div>
 

src/components/sites/doExerciseSite/consolePanel/consoleItem.tsx

@@ -228,6 +228,7 @@ const allAsciiColorCodes = Object.keys(asciiColorCodeMap)
 class consoleItem extends React.Component<Props, any> {
 
 
+  //note that \u001B is sometimes wrongly interpreted as \1xB (which is not the same) (after the test ran)
   convertConsoleLineToAsciiColoredLine(line: string): ReadonlyArray<JSX.Element> | string {
 
     if (line.includes('\\0') === false) {
@@ -541,11 +542,14 @@ class consoleItem extends React.Component<Props, any> {
               }
 
               {
+                //output mismatched
                 (this.props.item.hasOutputMismatched
                   &&
                   (
+                    // false & true
+                    //diff and/but no regex --> show colors
                     !this.props.useDiffIfOutputMismatched
-                    || (this.props.nextItem !== null && startsWith(this.props.nextItem.content, "(regex):")) //if next item is an expected regex then do output without showing diff... (other branch of see bot regex case)
+                    && (this.props.nextItem !== null && startsWith(this.props.nextItem.content, "(regex):")) //if next item is an expected regex then do output without showing diff... (other branch of see bot regex case)
                   )
                 ) &&
                 <div className="error-colored">
@@ -557,6 +561,47 @@ class consoleItem extends React.Component<Props, any> {
                 </div>
               }
               {
+                //output mismatched
+                (this.props.item.hasOutputMismatched
+                  &&
+                  (
+                    // false & false
+                    //diff and/but no regex --> show colors
+                    !this.props.useDiffIfOutputMismatched
+                    && (this.props.nextItem === null || !startsWith(this.props.nextItem.content, "(regex):")) //if next item is an expected regex then do output without showing diff... (other branch of see bot regex case)
+                  )
+                ) &&
+                <div className="error-colored">
+                  <pre className="mar-null">
+                  {
+                    this.convertConsoleLineToAsciiColoredLine(contentTransformer(this.props.item.content))
+                  }
+                  </pre>
+                </div>
+              }
+              {
+                //output mismatched
+                (this.props.item.hasOutputMismatched
+                  &&
+                  (
+                    // true & true
+                    //diff and regex --> show normal to see regex
+                    this.props.useDiffIfOutputMismatched
+                    && (this.props.nextItem !== null && startsWith(this.props.nextItem.content, "(regex):")) //if next item is an expected regex then do output without showing diff... (other branch of see bot regex case)
+                  )
+                ) &&
+                <div className="error-colored">
+                  <pre className="mar-null">
+                  {
+                    contentTransformer(this.props.item.content)
+                  }
+                  </pre>
+                </div>
+              }
+              {
+                // true & false
+                //diff and no regex
+                //--> no ascii color interpretation
                 //diff output, if we use diff output we cannot use regex because this doesn't make sense
                 (this.props.item.hasOutputMismatched && this.props.useDiffIfOutputMismatched
                   && (this.props.nextItem === null || !startsWith(this.props.nextItem.content, "(regex):")) //if next item is an expected regex then do not show diff (because not possible for regex)
@@ -653,8 +698,8 @@ class consoleItem extends React.Component<Props, any> {
 
                   {
                     startsWith(this.props.item.content, "(regex):")
-                    ? contentTransformer(this.props.item.content.substr("(regex):".length))
-                    : contentTransformer(this.props.item.content)
+                    ? this.convertConsoleLineToAsciiColoredLine(contentTransformer(this.props.item.content.substr("(regex):".length)))
+                    : this.convertConsoleLineToAsciiColoredLine(contentTransformer(this.props.item.content))
                   }
                 </pre>
               </div>

src/constants.ts

@@ -13,7 +13,7 @@ import Logger from './helpers/logger'
  * y - breaking changes / new features
  * z - fixes, small changes
  */
-export const versionString = '2.17.0'
+export const versionString = '2.18.0'
 
 
 export const supportMail = 'yapex@informatik.uni-halle.de'

src/questionSystem/testSyntaxGuide.md

@@ -67,6 +67,58 @@ e1
 
 dann müsste das Programm den Exit-Code 1 zurückgeben, andernfalls schlägt der Test fehl.
 
+
+### Farben
+
+Es können auch Farben ausgegeben werden, ähnlich wie im Terminal. Diese werden dann interpretiert, wenn das User-Programm eine ausgabe tätigt (und bei erwarteter Test-Ausgabe).
+Es werden nur folgende Farben/Auszeichnungen unterstützt (Ubuntu Farben):
+
+*Hinweis: manchmal wird auch `\u001B` als Präfix genommen, allerdings führt dies manchmal zu Fehler, daher immer `\\033` (nur ein `\` aber escaped) als Präfix benutzten*
+
+Vordergrundfarben
+- `\\033[0m` setzt alle Styles zurück
+- `\\033[1m` folgender Text wird `fett`
+- `\\033[4m` => `unterstrichen`
+- `\\033[7m` => `invertieren` (Farbe oder Hintergrundfarbe muss gesetzt sein)
+- `\\033[30m` => `schwarz`
+- `\\033[32m` => `grün`
+- `\\033[33m` => `gelb`
+- `\\033[34m` => `blau`
+- `\\033[35m` => `magenta`
+- `\\033[36m` => `cyan`
+- `\\033[37m` => `weiß/grau`
+
+Vordergrundfarben hell
+- `\\033[90m` => `schwarz/grau`
+- `\\033[91m` => `rot`
+- `\\033[92m` => `grün`
+- `\\033[93m` => `gelb`
+- `\\033[94m` => `balu`
+- `\\033[95m` => `magenta`
+- `\\033[96m` => `cyan`
+- `\\033[97m` => `weiß`
+
+Hintergrundfarben
+- `\\033[40m` => `schwarz`
+- `\\033[41m` => `rot`
+- `\\033[42m` => `grün`
+- `\\033[43m` => `gelb`
+- `\\033[44m` => `blau`
+- `\\033[45m` => `magenta`
+- `\\033[46m` => `cyan`
+- `\\033[47m` => `weiß/grau`
+
+Hintergrundfarben hell
+- `\\033[100m` => `schwarz/grau`
+- `\\033[101m` => `rot`
+- `\\033[102m` => `grün`
+- `\\033[103m` => `gelb`
+- `\\033[104m` => `balu`
+- `\\033[105m` => `magenta`
+- `\\033[106m` => `cyan`
+- `\\033[107m` => `weiß`
+
+
 ## Regex-Test
 
 Die Syntax für Regex-Tests hat eine fest vorgegebene Form: