demo/exam: nicer titles

Author: abdullin

demo/exam/app.go

@@ -136,6 +136,12 @@ func renderExamWindow(a *App) interface{} {
 	case *maths.MultipleChoice:
 
 		g := forms.NewGrid()
+
+		r0 := g.AddRow()
+		r0.AddCol(nil)
+		r0.AddCol(forms.NewTitle(k.Question, 1)).Steps = 6
+		r0.AddCol(nil)
+
 		r := g.AddRow()
 		r.AddCol(nil)
 
@@ -174,6 +180,12 @@ func renderExamWindow(a *App) interface{} {
 
 		w.AddMenu("Выберите наибольшее число", nil)
 		g := forms.NewGrid()
+
+		r0 := g.AddRow()
+		r0.AddCol(nil)
+		r0.AddCol(forms.NewTitle("Что больше?", 1)).Steps = 6
+		r0.AddCol(nil)
+
 		r := g.AddRow()
 		r.AddCol(nil)
 
@@ -231,16 +243,20 @@ func renderAnswers(a *App) interface{} {
 
 	g := forms.NewGrid()
 
-	g.AddRow()
+	r0 := g.AddRow()
+	r0.AddCol(nil)
+	r0.AddCol(forms.NewTitle("Правильные ответы", 1)).Steps = 8
+	r0.AddCol(nil)
+
 	rGrid := g.AddRow()
 
-	rGrid.AddCol(nil).Steps = 1
+	rGrid.AddCol(nil)
 
 	t := forms.NewTable()
 	cGrid := rGrid.AddCol(t)
 	cGrid.Steps = 6
 
-	rGrid.AddCol(nil).Steps = 1
+	rGrid.AddCol(nil)
 
 	t.AddTextColumn("Задание")
 	t.AddTextColumn("Ответ")

forms/button.go

@@ -16,3 +16,24 @@ func NewButton(text string, action *Action) *Button {
 		Action: action,
 	}
 }
+
+type Label struct {
+	Type  string `json:"type"`
+	Text  string `json:"text"`
+	Level int    `json:"level"`
+}
+
+func NewLabel(text string) *Label {
+	return &Label{
+		Type: "label",
+		Text: text,
+	}
+}
+
+func NewTitle(text string, level int) *Label {
+	return &Label{
+		Type:  "label",
+		Text:  text,
+		Level: level,
+	}
+}

web/src/components/Grid.jsx

@@ -7,8 +7,13 @@ const Row = ({cols, dispatch}) => {
     </div>;
 };
 
-const Col = ({content, dispatch}) => {
-    return <div className="col">
+const Col = ({content, dispatch, steps}) => {
+
+    var style = "col";
+    if (steps) {
+        style += " col-" + steps;
+    }
+    return <div className={style}>
         <Render {...content} dispatch={dispatch} />
         </div>;
 };

web/src/components/Image.jsx

@@ -1,8 +1,13 @@
 import React, { Component } from 'react';
 
 
-const Image = ({src}) => (
-    <img className="img-fluid" src={src} />
-);
+const Image = ({src, dispatch, action}) => {
+
+    if (action == null) {
+        return <img className="img-fluid" src={src} />;
+    }
+    
+    return <img className="img-fluid" src={src} onClick={() => dispatch(action) }/>;
+};
 
 export default Image;

web/src/components/Label.jsx

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+
+const Label = ({text, level}) => {
+
+    if (level == 1) {
+        return <h1>{text}</h1>;
+    }
+    if (level==2) {
+        return <h2>{text}</h2>;
+    }
+    
+    if (level==3) {
+        return <h3>{text}</h3>;
+    }
+    
+    if (level==4) {
+        return <h4>{text}</h4>;
+    }
+
+    return <span>{text}</span>;
+    
+};
+
+export default Label;

web/src/components/Render.jsx

@@ -16,6 +16,8 @@ import Image from './Image';
 
 import Button from './Button';
 
+import Label from './Label';
+
 import Grid from './Grid';
 
 import Placeholder from './Placeholder';
@@ -100,7 +102,8 @@ var color = [
         return <Placeholder {...rest} />;
     case 'grid':
         return <Grid {...rest} />;
-        
+    case 'label':
+        return <Label {...rest} />;
     default:
         return (<p>Unknown render type {type}</p>);
     }