Add help page explaining how to create a new quiz

cmd/web/handlers.go

@@ -56,6 +56,10 @@ func (app *application) home(w http.ResponseWriter, r *http.Request, formData ho
 	app.render(w, r, "home.page.tmpl.html", td)
 }
 
+func (app *application) help(w http.ResponseWriter, r *http.Request, params httprouter.Params) {
+	app.render(w, r, "help.page.tmpl.html", nil)
+}
+
 func (app *application) play(w http.ResponseWriter, r *http.Request, params httprouter.Params) {
 	if err := r.ParseForm(); err != nil {
 		app.clientError(w, http.StatusBadRequest)

cmd/web/main.go

@@ -111,6 +111,7 @@ func main() {
 	mux.GET("/template", app.downloadTemplate)
 	mux.POST("/game", app.createGame)
 	mux.GET("/quiz/:gameUid", app.showGame)
+	mux.GET("/help", app.help)
 
 	mux.GET("/ws/:playerUid", app.processWebSocket)
 

ui/html/help.page.tmpl.html

@@ -0,0 +1,24 @@
+{{- template "base" . -}}
+
+{{- define "additional-css" -}}
+	<link rel="stylesheet" href="/static/home.css">
+{{ end -}}
+
+{{- define "additional-js" -}}
+	<script src="/static/home.js"></script>
+{{ end -}}
+
+{{- define "header" }}
+	<h1>Popis souboru s otázkami</h1>
+{{ end -}}
+
+{{- define "main" }}
+		<div style="max-width: 75vw;">
+			<p>
+				Soubor je CSV (oddělovačem je čárka, kódování UTF-8) bez záhlaví. Lze jej otevřít a upravit obvyklými kancelářskými programy (Microsoft Excel, LibreOffice…).
+			</p>
+			<p>
+				Každý neprázdný řádek odpovídá buďto otázce, nebo odpovědi. Otázka má svůj nadpis v prvním sloupci. Odpověď má první sloupec prázný, svůj nadpis má ve druhém sloupci a váže se k nejbližší předcházející otázce. Otázky mohou volitelně (krom první) ve druhém sloupci uvést čas na odpověď v milisekundách, jinak se použije hodnota předchozí otázky. Odpovědi, které mají ve třetím sloupci číslo 1 se považují za správné.
+			</p>
+		</div>
+{{ end -}}

ui/html/home.page.tmpl.html

@@ -58,7 +58,8 @@ <h1>Zorganizovat novou hru</h1>
 				</ul>
 			{{- end }}
 			<h1>Vytvořit nový kvíz</h1>
-			<p>Stáhnout <a href="/template" download>šablonu nového kvízu</a></p>
+			<p><a href="/template" download>Šablona nového kvízu</a>.</p>
+			<p><a href="/help">Nápověda</a></p>
 			<form id="new" enctype="multipart/form-data" method="post" action="/game">
 				<label>Jméno kvízu: <input type="text" name="name" placeholder="Jméno kvízu" required value="{{ .Title }}"></label>
 				<label>Jméno autora: <input type="text" name="author" placeholder="Jméno" required value="{{ .Name }}"></label>