Improve quizzes

package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "canary": "open -a Google\\ Chrome\\ Canary --args --disable-web-security --user-data-dir=$HOME/cannary"
   },
   "private": true,
   "dependencies": {

src/app/app.module.ts

@@ -13,7 +13,7 @@ import { LinkComponent } from 'src/app/link/link.component';
 import { MakeCodeComponent } from 'src/app/make-code/make-code.component';
 import { MessageComponent } from 'src/app/message/message.component';
 import { AppPlaceholderComponent } from 'src/app/placeholder/app-placeholder.component';
-import { QuizComponent } from 'src/app/quiz/quiz.component';
+import { GetSelectedAnswersPipePipe, QuizComponent } from 'src/app/quiz/quiz.component';
 import { RobotComponent } from 'src/app/robot/robot.component';
 import { TimerComponent } from 'src/app/timer/timer.component';
 import { TutorialComponent } from 'src/app/tutorial/tutorial.component';
@@ -88,6 +88,7 @@ export function routerErrorHandle(error: Error) {
     LinkComponent,
     SafePipe,
     TypePipe,
+    GetSelectedAnswersPipePipe,
     TemplateComponent,
     HiddenComponent,
     PollComponent

src/app/how-to/how-to.component.scss

@@ -4,6 +4,7 @@
   border-radius: 5px;
   box-shadow: 2px 2px 5px silver;
   overflow: hidden;
+  margin: 10px 0;
 }
 
 .line {

src/app/md/typography.scss

@@ -26,7 +26,7 @@ code:not(pre > code) {
 }
 
 pre {
-  margin: 20px 0;
+  margin: 10px 0;
   position: relative;
   display: inline-block;
   min-width: 50%;

src/app/quiz/quiz.component.html

@@ -13,7 +13,7 @@
                 <div *ngLet="item | getFromMap: indexes as index"
                      class="option"
                      [class.right]="right | include: index"
-                     [class.answer]="(answers || []) | include: index">
+                     [class.answer]="answersControl.value | getSelectedAnswers | include: index">
                   <label>
                     <input type="checkbox"
                            [formControlName]="index"

src/app/quiz/quiz.component.scss

@@ -1,12 +1,14 @@
 @import '~highlight.js/styles/docco.css';
 @import '../md';
+@import '../../default';
 
 :host {
-  display: block;
-  padding: 10px 20px;
+  display: inline-block;
+  min-width: 50%;
+  padding: 20px 20px;
   border-radius: 10px;
-  background: lightgoldenrodyellow;
   margin: 10px 0;
+  border: 10px solid lightgoldenrodyellow;
 }
 
 form {

src/app/quiz/quiz.component.ts

@@ -1,8 +1,30 @@
-import { ChangeDetectorRef, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  Input,
+  Pipe, PipeTransform,
+  ViewEncapsulation
+} from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { marked } from 'marked';
 import { HeapManager } from 'src/managers/heap.manager';
 
+@Pipe({name: 'getSelectedAnswers'})
+export class GetSelectedAnswersPipePipe implements PipeTransform {
+
+  transform(arr: boolean[]): number[] {
+    const selected = [];
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i]) {
+        selected.push(i);
+      }
+    }
+    return selected;
+  }
+
+}
+
 @Component({
   selector: 'app-quiz',
   templateUrl: './quiz.component.html',

src/default.scss

@@ -0,0 +1,7 @@
+button, input[type=submit], input[type=button] {
+  border: 0;
+  border-radius: 5px;
+  padding: 5px 10px;
+  cursor: pointer;
+  user-select: none;
+}