2 |
4 |
5 |
9 |
--------------------------------------------------------------------------------
/src/app/build/brick/brick.component.scss:
--------------------------------------------------------------------------------
1 | .fixed-center {
2 | margin:auto;
3 | }
4 |
5 | .spinner-container {
6 | position: fixed;
7 | top: 0;
8 | right: 0;
9 | bottom: 0;
10 | left: 0;
11 | display: flex;
12 | }
13 |
14 | .back-container {
15 | width: 100%;
16 | height: 100%;
17 | background-color: #ffffff;
18 | }
19 |
20 | .brick-container {
21 | max-width: 800px;
22 | margin: 0 auto;
23 | height: 100%;
24 | }
25 |
26 | .begin-row {
27 | margin-top: 15px;
28 | margin-bottom: 15px;
29 | }
--------------------------------------------------------------------------------
/src/app/build/brick/brick.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { Router, ActivatedRoute, ParamMap } from '@angular/router';
4 |
5 | import { BrickService } from './brick.service';
6 | import { Brick } from '../../schema';
7 |
8 | @Component({
9 | templateUrl: './brick.component.html',
10 | styleUrls: ['./brick.component.scss']
11 | })
12 | export class BrickComponent {
13 | constructor(
14 | private bricks: BrickService,
15 | private route: ActivatedRoute
16 | ) {
17 | this.route.paramMap
18 | .subscribe((data: ParamMap) => {
19 | var id = data.get('id');
20 | bricks.loadBrick(id);
21 | bricks.currentBrick.subscribe((data) => {
22 | this.brick = data;
23 | })
24 | })
25 | }
26 |
27 | brick: Brick;
28 | }
--------------------------------------------------------------------------------
/src/app/build/brick/brick.routing.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 |
4 | import { BrickComponent } from './brick.component';
5 | import { IntroductionComponent } from './introduction.component';
6 | import { LiveComponent } from './live.component';
7 | import { SummaryComponent } from './summary.component';
8 | import { ReviewComponent } from './review.component';
9 | import { EndingComponent } from './ending.component';
10 |
11 | const brickRoutes = [
12 | {path: ':id', component: BrickComponent, children: [
13 | { path: 'intro', component: IntroductionComponent },
14 | { path: 'live', component: LiveComponent },
15 | { path: 'summary', component: SummaryComponent },
16 | { path: 'review', component: ReviewComponent },
17 | { path: 'ending', component: EndingComponent },
18 | { path: '', redirectTo: 'intro', pathMatch: 'full' }
19 | ]}
20 | ]
21 |
22 | @NgModule({
23 | imports: [ RouterModule.forChild(brickRoutes) ],
24 | exports: [ RouterModule ]
25 | })
26 | export class BrickRoutingModule { }
27 |
--------------------------------------------------------------------------------
/src/app/build/brick/brick.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { DatabaseService } from '../../database/database.service';
3 |
4 | import { BehaviorSubject, Observable } from 'rxjs';
5 |
6 | import { Brick, BrickAttempt, Pallet } from '../../schema';
7 |
8 | @Injectable({
9 | providedIn: 'root'
10 | })
11 | export class BrickService {
12 | constructor(public database: DatabaseService) {
13 | this.currentBrick = new BehaviorSubject(null);
14 | }
15 |
16 | currentBrick: BehaviorSubject
6 |
8 |
25 |
33 |
28 |
31 |
32 | {{ choice }}
29 | {{ data.data.reveals[getChoice(choice)] }}
30 |
24 |
25 |
26 | `,
27 | styleUrls: ["../live.component.scss"]
28 | })
29 | export class TextComponent extends CompComponent {
30 | constructor() { super() }
31 |
32 | @Input() data: CompText;
33 |
34 | getAnswer() : null { return null; }
35 | }
--------------------------------------------------------------------------------
/src/app/build/brick/comp/highlight.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, Input, ElementRef } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[highlight]",
5 | })
6 | export class HighlightDirective {
7 | _highlight: boolean;
8 | @Input() state: number;
9 |
10 | constructor(public el: ElementRef) { }
11 |
12 | @Input() set highlight(highlight: boolean) {
13 | this._highlight = highlight;
14 | this.onHighlightChange();
15 | };
16 |
17 | onHighlightChange() {
18 | if(!this.state) {
19 | this.el.nativeElement.style.backgroundColor = this._highlight ? "#00dece" : "#ffffff";
20 | } else {
21 | this.el.nativeElement.style.backgroundColor = this._highlight ? (this.state == 1 ? "#55ff55" : "#ff5555") : "#ffffff"
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/build/brick/ending.component.html:
--------------------------------------------------------------------------------
1 |
3 |
25 |
26 |
27 |
28 | Other Information
29 |
30 |
31 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/src/app/build/brick/ending.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 | import { BrickAttempt, Brick, Pallet } from "../../schema";
3 | import { BrickService } from "./brick.service";
4 |
5 | import { BehaviorSubject, Observable } from "rxjs";
6 | import { ActivatedRoute, Router } from "@angular/router";
7 |
8 | @Component({
9 | selector: 'live-ending',
10 | templateUrl: './ending.component.html',
11 | styleUrls: ['./summary.component.scss']
12 | })
13 | export class EndingComponent {
14 | brickAttempt: BrickAttempt;
15 | aBrick: BehaviorSubject{{ brick.subject }}/{{ (aPallet | async)?.name }}/{{ brick.type | brickTime | date: 'm' }} minutes
4 |{{ brick.title }}
5 |
6 |
17 |
18 |
24 |
7 |
16 |
8 |
15 |
11 |
14 | {{ (brickAttempt?.score * 100 / brickAttempt?.maxScore) | number:'0.0-0' }}%
12 | {{ brickAttempt?.score }} / {{ brickAttempt?.maxScore }}
13 |
32 |
34 | Creator: {{ brick.creator }}
33 |
35 |
39 | Total Users: {{ brick.totalUsers }}
36 |average score {{ brick.avgScore }}
37 |high score {{ brick.highScore }}
38 |
4 |
7 |
8 |
9 |
10 | Brief
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Prep
19 |
20 |
21 |
22 |
23 |
24 |
30 |
31 |
32 |
33 |
34 | Other Information
35 |
36 |
37 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/src/app/build/brick/introduction.component.scss:
--------------------------------------------------------------------------------
1 | .timer-container {
2 | position: fixed;
3 | bottom: 5px;
4 | right: 5px;
5 | display: flex;
6 | z-index: 100;
7 | }
8 |
9 | .timer {
10 | font-size: 20px;
11 | background-color: #fff;
12 | }
13 |
14 | .container {
15 | height: 100%;
16 | padding: 1vw 1vw 1vw 1vw;
17 | box-sizing: border-box;
18 | background-color: white;
19 | }
20 |
21 | .bottom-container {
22 | margin-top: auto;
23 | margin-bottom: 1vh;
24 | }
25 |
26 | .spacer {
27 | margin: auto;
28 | }
29 |
30 | .begin-label {
31 | font-size: 25px;
32 | margin-right: 10px;
33 | }
34 |
35 | .begin-row {
36 | margin-top: 15px;
37 | margin-bottom: 15px;
38 | }
39 |
40 | h1, h3, p {
41 | margin: 5px;
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/build/brick/introduction.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { ActivatedRoute, Router, ParamMap } from '@angular/router';
4 |
5 | import { switchMap } from 'rxjs/operators';
6 |
7 | import { Brick, Pallet } from '../../schema';
8 | import { BrickService } from './brick.service';
9 | import { BehaviorSubject, Observable } from 'rxjs';
10 | import { TimerService, Timer } from './timer.service';
11 | import { BrickTimePipe } from './brickTime.pipe';
12 |
13 | @Component({
14 | selector: 'introduction',
15 | templateUrl: './introduction.component.html',
16 | styleUrls: ['./introduction.component.scss']
17 | })
18 | export class IntroductionComponent {
19 | constructor(private bricks: BrickService, timer: TimerService, private brickTime: BrickTimePipe, private router: Router, private route: ActivatedRoute) {
20 | this.timer = timer.new();
21 | this.timer.timeResolution = 1000;
22 | this.aBrick = bricks.currentBrick;
23 | this.aBrick.subscribe(val => {
24 | if(val != null) {
25 | this.aPallet = bricks.currentPallet;
26 | this.showBrick(val);
27 | }
28 | });
29 | }
30 |
31 | aBrick: BehaviorSubject{{ brick.subject }}/{{ (aPallet | async)?.name }}/{{ ((brick.type | brickTime)/60000) }} minutes
5 |{{ brick.title }}
6 |
38 |
40 | Creator: {{ brick.creator }}
39 |
41 |
45 | Total Users: {{ brick.totalUsers }}
42 |average score {{ brick.avgScore }}
43 |high score {{ brick.highScore }}
44 |Question is correct!
7 |
4 |
32 |
33 |
34 |
35 | Other Information
36 |
37 |
38 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/src/app/build/brick/summary.component.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 1vw;
3 | height: 100%;
4 | bottom: 0;
5 | background-color: white;
6 | }
7 |
8 | .overflow {
9 | overflow: hidden auto;
10 | }
11 |
12 | .score-wheel {
13 | position: absolute;
14 | height: 350px;
15 | }
16 |
17 | .numbers-container {
18 | position: absolute;
19 | height: 350px;
20 | }
21 |
22 | .score-percentage {
23 | font-size: 50px;
24 | }
25 |
26 | .score-number {
27 | font-size: 30px;
28 | }
29 |
30 | .data-container {
31 | margin: 10px;
32 | }
33 |
34 | .begin-row {
35 | margin-top: 15px;
36 | margin-bottom: 15px;
37 | }
38 |
39 | h1, h3, p {
40 | margin: 5px;
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/build/brick/summary.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 | import { BrickAttempt, Brick, Pallet } from "../../schema";
3 | import { BrickService } from "./brick.service";
4 |
5 | import { BehaviorSubject, Observable } from "rxjs";
6 | import { ActivatedRoute, Router } from "@angular/router";
7 | import { BrickTimePipe } from "./brickTime.pipe";
8 | import { TimerService, Timer } from "./timer.service";
9 |
10 | @Component({
11 | selector: 'live-summary',
12 | templateUrl: './summary.component.html',
13 | styleUrls: ['./summary.component.scss']
14 | })
15 | export class SummaryComponent {
16 | brickAttempt: BrickAttempt;
17 | aBrick: BehaviorSubject{{ brick.subject }}/{{ (aPallet | async)?.name }}/{{ ((brick.type | brickTime)/60000) }} minutes
5 |{{ brick.title }}
6 |average score {{ brick.avgScore }}
7 |high score {{ brick.highScore }}
8 | 9 |
10 |
11 |
12 | Summary
13 |
14 | {{ brick.summary }}
15 |
16 |
24 |
25 |
31 |
17 |
23 |
19 |
22 | {{ (brickAttempt?.score * 100 / brickAttempt?.maxScore) | number:'0.0-0' }}%
20 | {{ brickAttempt?.score }} / {{ brickAttempt?.maxScore }}
21 |
39 |
41 | Creator: {{ brick.creator }}
40 |
42 |
46 | Total Users: {{ brick.totalUsers }}
43 |average score {{ brick.avgScore }}
44 |high score {{ brick.highScore }}
45 |
8 |
9 | {{ timer.timeLeft?.valueOf() / 1000 }} seconds
10 |
11 |
12 | `,
13 | styles: [
14 | `
15 | .timer-container {
16 | position: fixed;
17 | bottom: 5px;
18 | right: 5px;
19 | display: flex;
20 | z-index: 100;
21 | }
22 |
23 | .timer {
24 | font-size: 20px;
25 | background-color: #fff;
26 | }
27 | `
28 | ]
29 | })
30 | export class TimerComponent {
31 | @Input() timer: Timer;
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/build/brick/timer.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, EventEmitter } from "@angular/core";
2 | import { timer, Observable, Subscription } from "rxjs";
3 |
4 |
5 | // TODO: Add call to API to make sure that a brick can't be reset.
6 | export class Timer {
7 | constructor () { }
8 |
9 | timeElapsed : Date;
10 | timeLeft : Date;
11 | timeLimit : Date;
12 |
13 | timeResolution: number;
14 |
15 | timer : Observable
8 |
17 | `,
18 | styleUrls: ['./login.component.scss']
19 | })
20 | export class LoginComponent {
21 | userType: number;
22 |
23 | sel: boolean = false;
24 |
25 | constructor(public authService: AuthService) { }
26 |
27 | selected(userType: number) {
28 | this.sel = true;
29 | this.userType = userType;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/app/login/login.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 | import { FlexLayoutModule } from "@angular/flex-layout";
4 | import { LoginComponent } from "./login.component";
5 | import { UserTypeComponent } from "./user-type.component";
6 | import { SignInComponent } from "./sign-in.component";
7 | import { AuthModule } from "../auth/auth.module";
8 | import { MaterialModule } from "../material.module";
9 |
10 | @NgModule({
11 | imports: [ CommonModule, FlexLayoutModule, MaterialModule, AuthModule ],
12 | declarations: [ LoginComponent, UserTypeComponent, SignInComponent ],
13 | exports: [ LoginComponent ]
14 | })
15 | export class LoginModule { }
16 |
--------------------------------------------------------------------------------
/src/app/login/sign-in.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/learning-fortress-frontend/06c21f38695e15334385964bff82dba2d712ac0a/src/app/login/sign-in.component.scss
--------------------------------------------------------------------------------
/src/app/login/sign-in.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 | import { AuthService } from "../auth/auth.service";
3 |
4 | @Component({
5 | selector: 'sign-in',
6 | template: `
7 |
9 |
16 |
10 | 
11 |
13 | 11 |
Learning Fortress
12 |
2 |
6 |
7 | {{brick.title}}
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/app/manage/dashboard/dashboard.component.scss:
--------------------------------------------------------------------------------
1 | .bricks-container {
2 | max-width: 150vh;
3 | margin: 0 auto;
4 | .bricks-list {
5 | mat-grid-tile {
6 | p { margin: 10px; }
7 | background: #111F33;
8 | color: #ffffff;
9 | }
10 | margin: 10px;
11 | }
12 | }
13 |
14 | /* To create the right kind of cursor when hovering over cards */
15 | mat-grid-tile {
16 | cursor: pointer;
17 | }
18 |
19 | /* Set the alignment and padding of the text inside the brick */
20 | .text-inside-grid {
21 | text-align: center;
22 | }
23 |
24 | .mat-figure {
25 | padding: 5px;
26 | }
--------------------------------------------------------------------------------
/src/app/manage/dashboard/dashboard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 | import { Pallet, Brick } from "../../schema";
3 | import { ActivatedRoute, ParamMap } from "@angular/router";
4 | import { DatabaseService } from "../../database/database.service";
5 | import { Observable } from "rxjs";
6 |
7 | @Component({
8 | selector: 'dashboard',
9 | templateUrl: './dashboard.component.html',
10 | styleUrls: ['./dashboard.component.scss']
11 | })
12 | export class DashboardComponent {
13 | bricks: Observable
3 |
5 | Manage Bricks
4 |
2 |
3 |
4 |
5 |
6 | Homepage
7 |
8 | home
9 |
10 |
11 |
12 | {{pallet.name}}
13 |
14 |
15 | {{pallet.subject}}
16 |
17 |
18 |
19 |
20 |
21 |
22 | Manage
23 |
24 | assignmant
25 |
26 |
27 |
28 |
29 |
30 | ![]()
41 |
42 |
50 |
51 |
55 |
56 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/src/app/navigation/navigation.component.scss:
--------------------------------------------------------------------------------
1 | .sidenav-container {
2 | top: 0;
3 | bottom: 0;
4 | left: 0;
5 | right: 0;
6 | height: 100%;
7 | background: #eee;
8 | }
9 |
10 | .sidenav {
11 | width: 20vw;
12 | }
13 |
14 | .profile-picture {
15 | border-radius: 50%;
16 | width: 40px;
17 | margin-right: 10px;
18 | }
--------------------------------------------------------------------------------
/src/app/navigation/navigation.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { AuthService } from '../auth/auth.service';
3 | import { DatabaseService } from '../database/database.service';
4 | import { Pallet } from '../schema';
5 | import { Observable } from 'rxjs';
6 | import { Router } from '@angular/router';
7 |
8 | @Component({
9 | selector: 'navigation',
10 | templateUrl: './navigation.component.html',
11 | styleUrls: ['./navigation.component.scss'],
12 | })
13 |
14 | export class NavigationComponent {
15 | title = 'navigation';
16 | pallets: Observable
31 |
35 |
38 |
39 |
40 |
43 |
48 |
49 |
2 |
4 |
5 |
9 |
--------------------------------------------------------------------------------
/src/app/play/brick/brick.component.scss:
--------------------------------------------------------------------------------
1 | .fixed-center {
2 | margin:auto;
3 | }
4 |
5 | .spinner-container {
6 | position: fixed;
7 | top: 0;
8 | right: 0;
9 | bottom: 0;
10 | left: 0;
11 | display: flex;
12 | }
13 |
14 | .back-container {
15 | width: 100%;
16 | height: 100%;
17 | background-color: #ffffff;
18 | }
19 |
20 | .brick-container {
21 | max-width: 800px;
22 | margin: 0 auto;
23 | height: 100%;
24 | }
25 |
26 | .begin-row {
27 | margin-top: 15px;
28 | margin-bottom: 15px;
29 | }
30 |
31 |
--------------------------------------------------------------------------------
/src/app/play/brick/brick.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { Router, ActivatedRoute, ParamMap } from '@angular/router';
4 |
5 | import { BrickService } from './brick.service';
6 | import { Brick } from '../../schema';
7 |
8 | @Component({
9 | templateUrl: './brick.component.html',
10 | styleUrls: ['./brick.component.scss'],
11 | styles: [
12 | ':host >>> .background-green { background: green; }',
13 | ':host >>> .color-red { color: red; }',
14 | ':host >>> .nowrap { white-space: nowrap; }'
15 | ]
16 | })
17 | export class BrickComponent {
18 | constructor(
19 | private bricks: BrickService,
20 | private route: ActivatedRoute
21 | ) {
22 | this.route.paramMap
23 | .subscribe((data: ParamMap) => {
24 | var id = data.get('id');
25 | bricks.loadBrick(id);
26 | bricks.currentBrick.subscribe((data) => {
27 | this.brick = data;
28 | })
29 | })
30 | }
31 |
32 | brick: Brick;
33 | }
--------------------------------------------------------------------------------
/src/app/play/brick/brick.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 | import { MaterialModule } from '../../material.module';
4 | import { MatIconModule } from '@angular/material/icon';
5 | import { BrickRoutingModule } from './brick.routing';
6 | import { CompModule } from './comp/comp.module';
7 |
8 | import { BrickComponent } from './brick.component';
9 | import { IntroductionComponent } from './introduction.component';
10 | import { LiveComponent } from './live.component';
11 |
12 | import { BrickTimePipe } from './brickTime.pipe';
13 | import { QuestionComponent } from './question.component';
14 | import { DragulaModule } from 'ng2-dragula';
15 | import { NgArrayPipesModule } from 'ngx-pipes';
16 | import { SummaryComponent } from './summary.component';
17 | import { FlexLayoutModule } from '@angular/flex-layout';
18 | import { ReviewComponent } from './review.component';
19 | import { EndingComponent } from './ending.component';
20 | import { TimerComponent } from './timer.component';
21 | import { ReversePipe } from '../../build/brick/comp/comp_reverse.pipe';
22 |
23 | @NgModule({
24 | imports: [ BrickRoutingModule, CommonModule, MaterialModule, MatIconModule, DragulaModule, CompModule, NgArrayPipesModule, FlexLayoutModule ],
25 | declarations: [
26 | BrickComponent, TimerComponent, IntroductionComponent, LiveComponent, QuestionComponent, SummaryComponent, ReviewComponent, EndingComponent, BrickTimePipe, ReversePipe,
27 | ],
28 | providers: [
29 | BrickTimePipe, ReversePipe
30 | ]
31 | })
32 | export class BrickModule { }
33 |
--------------------------------------------------------------------------------
/src/app/play/brick/brick.routing.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 |
4 | import { BrickComponent } from './brick.component';
5 | import { IntroductionComponent } from './introduction.component';
6 | import { LiveComponent } from './live.component';
7 | import { SummaryComponent } from './summary.component';
8 | import { ReviewComponent } from './review.component';
9 | import { EndingComponent } from './ending.component';
10 |
11 | const routes = [
12 | {path: ':id', component: BrickComponent, children: [
13 | { path: 'intro', component: IntroductionComponent },
14 | { path: 'live', component: LiveComponent },
15 | { path: 'summary', component: SummaryComponent },
16 | { path: 'review', component: ReviewComponent },
17 | { path: 'ending', component: EndingComponent },
18 | { path: '', redirectTo: 'intro', pathMatch: 'full' }
19 | ]}
20 | ]
21 |
22 | @NgModule({
23 | imports: [ RouterModule.forChild(routes) ],
24 | exports: [ RouterModule ]
25 | })
26 | export class BrickRoutingModule { }
27 |
--------------------------------------------------------------------------------
/src/app/play/brick/brick.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { DatabaseService } from '../../database/database.service';
3 |
4 | import { BehaviorSubject, Observable } from 'rxjs';
5 |
6 | import { Brick, BrickAttempt, Pallet } from '../../schema';
7 |
8 | @Injectable({
9 | providedIn: 'root'
10 | })
11 | export class BrickService {
12 | constructor(public database: DatabaseService) {
13 | this.currentBrick = new BehaviorSubject(null);
14 | }
15 |
16 | currentBrick: BehaviorSubject
6 |
8 |
20 |
21 |
22 | `,
23 | styleUrls: ["../live.component.scss"]
24 | })
25 | export class PoemComponent extends CompComponent {
26 | constructor() { super() }
27 |
28 | @Input() data: CompText;
29 |
30 | getAnswer() : null { return null; }
31 | }
--------------------------------------------------------------------------------
/src/app/play/brick/comp/comp_reveal.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 | import { register } from "./comp_index";
3 | import { Comp, ComponentAttempt } from "../../../schema";
4 | import { CompComponent } from "./comp.component";
5 |
6 | export class CompText extends Comp {
7 | data: { text: string }
8 |
9 | constructor(data: { text: string }) {
10 | super();
11 | this.data = data;
12 | }
13 | }
14 |
15 | @register("Reveal")
16 | @Component({
17 | selector: "reveal",
18 | template: `
19 |
20 |
24 | `,
25 | styleUrls: ["../live.component.scss"]
26 | })
27 | export class RevealComponent extends CompComponent {
28 | constructor() { super() }
29 |
30 | @Input() data: CompText;
31 |
32 | getAnswer() : null { return null; }
33 | }
--------------------------------------------------------------------------------
/src/app/play/brick/comp/comp_single_choice.component.ts:
--------------------------------------------------------------------------------
1 | import { Comp, ComponentAttempt } from "../../../schema";
2 | import { Component, Input } from "@angular/core";
3 |
4 | import { register } from './comp_index';
5 | import { CompComponent } from "./comp.component";
6 | import { MAT_CHECKBOX_CLICK_ACTION } from "@angular/material/checkbox";
7 |
8 | export class CompSingleChoice extends Comp {
9 | name = "Single Choice";
10 | data: { choices:string[], reveals:string[] }
11 |
12 | constructor(data: { choices:string[], reveals:string[] }) {
13 | super();
14 | this.data = data;
15 | }
16 | }
17 |
18 | @register("SingleChoice")
19 | @Component({
20 | selector: "single-choice",
21 | template: `
22 |
21 | {{data.data.text}}
22 |
23 |
25 |
33 |
28 |
31 |
32 | {{ choice }}
29 | {{ data.data.reveals[getChoice(choice)] }}
30 |
20 |
21 |
22 | `,
23 | styleUrls: ["../live.component.scss"]
24 | })
25 | export class TextComponent extends CompComponent {
26 | constructor() { super() }
27 |
28 | @Input() data: CompText;
29 |
30 | getAnswer() : null { return null; }
31 | }
--------------------------------------------------------------------------------
/src/app/play/brick/comp/highlight.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, Input, ElementRef } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[highlight]",
5 | })
6 | export class HighlightDirective {
7 | _highlight: boolean;
8 | @Input() state: number;
9 |
10 | constructor(public el: ElementRef) { }
11 |
12 | @Input() set highlight(highlight: boolean) {
13 | this._highlight = highlight;
14 | this.onHighlightChange();
15 | };
16 |
17 | onHighlightChange() {
18 | if(!this.state) {
19 | this.el.nativeElement.style.backgroundColor = this._highlight ? "#00dece" : "#ffffff";
20 | } else {
21 | this.el.nativeElement.style.backgroundColor = this._highlight ? (this.state == 1 ? "#55ff55" : "#ff5555") : "#ffffff"
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/play/brick/ending.component.html:
--------------------------------------------------------------------------------
1 |
3 |
24 |
25 |
26 |
27 | Other Information
28 |
29 |
30 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/src/app/play/brick/ending.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 | import { BrickAttempt, Brick, Pallet } from "../../schema";
3 | import { BrickService } from "./brick.service";
4 |
5 | import { BehaviorSubject, Observable } from "rxjs";
6 | import { ActivatedRoute, Router } from "@angular/router";
7 |
8 | @Component({
9 | selector: 'live-ending',
10 | templateUrl: './ending.component.html',
11 | styleUrls: ['./summary.component.scss']
12 | })
13 | export class EndingComponent {
14 | brickAttempt: BrickAttempt;
15 | aBrick: BehaviorSubject{{ brick.subject }}/{{ (aPallet | async)?.name }}/{{ brick.type | brickTime | date: 'm' }} minutes
4 |{{ brick.title }}
5 |
6 |
17 |
18 |
7 |
16 |
8 |
15 |
11 |
14 | {{ (brickAttempt?.score * 100 / brickAttempt?.maxScore) | number:'0.0-0' }}%
12 | {{ brickAttempt?.score }} / {{ brickAttempt?.maxScore }}
13 |
20 |
21 | play_arrow
22 |
23 | Return to Dashboard
31 |
33 | Creator: {{ brick.creator }}
32 |
34 |
38 | Total Users: {{ brick.totalUsers }}
35 |average score {{ brick.avgScore }}
36 |high score {{ brick.highScore }}
37 |
4 |
7 |
8 |
9 |
10 | Brief
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Prep
19 |
20 |
21 |
22 |
23 |
24 |
30 |
31 |
32 |
33 | Other Information
34 |
35 |
36 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/src/app/play/brick/introduction.component.scss:
--------------------------------------------------------------------------------
1 | .timer-container {
2 | position: fixed;
3 | bottom: 5px;
4 | right: 5px;
5 | display: flex;
6 | z-index: 100;
7 | }
8 |
9 | .timer {
10 | font-size: 20px;
11 | background-color: #fff;
12 | }
13 |
14 | .container {
15 | height: 100%;
16 | padding: 1vw 1vw 1vw 1vw;
17 | box-sizing: border-box;
18 | background-color: white;
19 | }
20 |
21 | .bottom-container {
22 | margin-top: auto;
23 | margin-bottom: 1vh;
24 | }
25 |
26 | .spacer {
27 | margin: auto;
28 | }
29 |
30 | .begin-label {
31 | font-size: 25px;
32 | margin-right: 10px;
33 | }
34 |
35 | .begin-row {
36 | margin-top: 15px;
37 | margin-bottom: 15px;
38 | }
39 |
40 | h1, h3, p {
41 | margin: 5px;
42 | }
43 |
44 | mat-panel-title {
45 | font-size: 24px;
46 | font-weight: 400;
47 | }
--------------------------------------------------------------------------------
/src/app/play/brick/introduction.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { ActivatedRoute, Router, ParamMap } from '@angular/router';
4 |
5 | import { switchMap } from 'rxjs/operators';
6 |
7 | import { Brick, Pallet } from '../../schema';
8 | import { BrickService } from './brick.service';
9 | import { BehaviorSubject, Observable } from 'rxjs';
10 | import { TimerService, Timer } from './timer.service';
11 | import { BrickTimePipe } from './brickTime.pipe';
12 |
13 | @Component({
14 | selector: 'introduction',
15 | templateUrl: './introduction.component.html',
16 | styleUrls: ['./introduction.component.scss']
17 | })
18 | export class IntroductionComponent {
19 | constructor(private bricks: BrickService, timer: TimerService, private brickTime: BrickTimePipe, private router: Router, private route: ActivatedRoute) {
20 | this.timer = timer.new();
21 | this.timer.timeResolution = 1000;
22 | this.aBrick = bricks.currentBrick;
23 | this.aBrick.subscribe(val => {
24 | if(val != null) {
25 | this.aPallet = bricks.currentPallet;
26 | this.showBrick(val);
27 | }
28 | });
29 | }
30 |
31 | aBrick: BehaviorSubject{{ brick.subject }}/{{ (aPallet | async)?.name }}/{{ ((brick.type | brickTime)/60000) }} minutes
5 |{{ brick.title }}
6 |
26 |
27 | play_arrow
28 |
29 | Begin Brick
37 |
39 | Creator: {{ brick.creator }}
38 |
40 |
44 | Total Users: {{ brick.totalUsers }}
41 |average score {{ brick.avgScore }}
42 |high score {{ brick.highScore }}
43 |
16 |
17 | play_arrow
18 |
19 |
--------------------------------------------------------------------------------
/src/app/play/brick/live.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewChildren, QueryList } from '@angular/core';
2 |
3 | import { BrickService } from './brick.service';
4 |
5 | import { Brick, Question, BrickAttempt, Student, Pallet } from '../../schema';
6 | import { Observable } from 'rxjs';
7 | import { TimerService, Timer } from './timer.service';
8 | import { BrickTimePipe } from './brickTime.pipe';
9 |
10 | import { CompComponent } from './comp/comp.component';
11 | import { QuestionComponent } from './question.component';
12 | import { Router, ActivatedRoute } from '@angular/router';
13 | import { AuthService } from '../../auth/auth.service';
14 | import * as $ from 'jquery';
15 |
16 | @Component({
17 | selector: 'live',
18 | templateUrl: './live.component.html',
19 | styleUrls: ['./live.component.scss'],
20 | providers: [ ]
21 | })
22 | export class LiveComponent {
23 | constructor(public bricks: BrickService, timer: TimerService, brickTime: BrickTimePipe, public router: Router, public route: ActivatedRoute, public auth: AuthService) {
24 | this.brick = bricks.currentBrick.asObservable();
25 | this.timer = timer.new();
26 | this.timer.timeResolution = 1000;
27 | this.brickTime = brickTime;
28 | bricks.currentBrick.subscribe((data) => {
29 | if(data != null) {
30 | this._brick = data;
31 | this.showBrick(this._brick);
32 | }
33 | });
34 | }
35 |
36 | brick: ObservableSubmit Initial Brick Attempt
Question is correct!
7 |
11 |
12 | play_arrow
13 |
14 |
--------------------------------------------------------------------------------
/src/app/play/brick/review.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewChildren, QueryList } from "@angular/core";
2 | import { Observable } from "rxjs";
3 | import { Brick, BrickAttempt, QuestionAttempt } from "../../schema";
4 | import { Timer, TimerService } from "./timer.service";
5 | import { BrickTimePipe } from "./brickTime.pipe";
6 | import { BrickService } from "./brick.service";
7 | import { Router, ActivatedRoute } from "@angular/router";
8 | import { AuthService } from "../../auth/auth.service";
9 | import { QuestionComponent } from "./question.component";
10 |
11 | @Component({
12 | selector: 'live-review',
13 | templateUrl: './review.component.html',
14 | styleUrls: ['./live.component.scss']
15 | })
16 | export class ReviewComponent {
17 | constructor(public bricks: BrickService, timer: TimerService, brickTime: BrickTimePipe, public router: Router, public route: ActivatedRoute, public auth: AuthService) {
18 | this.brick = bricks.currentBrick.asObservable();
19 | this.brickAttempt = bricks.currentBrickAttempt;
20 | if(!this.brickAttempt) {
21 | this.router.navigate(['../live'], {relativeTo: route});
22 | }
23 | this.timer = timer.new();
24 | this.timer.timeResolution = 1000;
25 | this.brickTime = brickTime;
26 | bricks.currentBrick.subscribe((data) => {
27 | if(data != null) {
28 | this._brick = data;
29 | this.showBrick(this._brick);
30 | }
31 | })
32 | }
33 |
34 | brick: ObservableFinish Brick Attempt
4 |
31 |
32 |
33 |
34 | Other Information
35 |
36 |
37 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/src/app/play/brick/summary.component.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 1vw;
3 | height: 100%;
4 | bottom: 0;
5 | background-color: white;
6 | }
7 |
8 | /* hide overflow to stop whitespace on right of summary phase on iphone5 width */
9 | .score-container {
10 | overflow: hidden;
11 | }
12 |
13 | .score-wheel {
14 | position: absolute;
15 | height: 350px;
16 | }
17 |
18 | .numbers-container {
19 | position: absolute;
20 | height: 350px;
21 | }
22 |
23 | .score-percentage {
24 | font-size: 50px;
25 | }
26 |
27 | .score-number {
28 | font-size: 30px;
29 | }
30 |
31 | .data-container {
32 | margin: 10px;
33 | }
34 |
35 | .begin-row {
36 | margin-top: 15px;
37 | margin-bottom: 15px;
38 | }
39 |
40 | h1, h3, p {
41 | margin: 5px;
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/play/brick/summary.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 | import { BrickAttempt, Brick, Pallet } from "../../schema";
3 | import { BrickService } from "./brick.service";
4 |
5 | import { BehaviorSubject, Observable } from "rxjs";
6 | import { ActivatedRoute, Router } from "@angular/router";
7 | import { BrickTimePipe } from "./brickTime.pipe";
8 | import { TimerService, Timer } from "./timer.service";
9 |
10 | @Component({
11 | selector: 'live-summary',
12 | templateUrl: './summary.component.html',
13 | styleUrls: ['./summary.component.scss']
14 | })
15 | export class SummaryComponent {
16 | brickAttempt: BrickAttempt;
17 | aBrick: BehaviorSubject{{ brick.subject }}/{{ (aPallet | async)?.name }}/{{ ((brick.type | brickTime)/60000) }} minutes
5 |{{ brick.title }}
6 | 7 |
8 |
24 |
25 |
9 |
10 |
11 | Explanatory Review
12 |
13 |
15 |
23 |
16 |
22 |
18 |
21 | {{ (brickAttempt?.score * 100 / brickAttempt?.maxScore) | number:'0.0-0' }}%
19 | {{ brickAttempt?.score }} / {{ brickAttempt?.maxScore }}
20 |
27 |
28 | play_arrow
29 |
30 | Review Brick Attempt
38 |
40 | Creator: {{ brick.creator }}
39 |
41 |
45 | Total Users: {{ brick.totalUsers }}
42 |average score {{ brick.avgScore }}
43 |high score {{ brick.highScore }}
44 |
8 |
9 | {{ timer.timeLeft?.valueOf() / 1000 }} seconds
10 |
11 |
12 | `,
13 | styles: [
14 | `
15 | .timer-container {
16 | position: fixed;
17 | bottom: 5px;
18 | right: 5px;
19 | display: flex;
20 | z-index: 100;
21 | }
22 |
23 | .timer {
24 | font-size: 20px;
25 | background-color: #fff;
26 | }
27 | `
28 | ]
29 | })
30 | export class TimerComponent {
31 | @Input() timer: Timer;
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/play/brick/timer.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, EventEmitter } from "@angular/core";
2 | import { timer, Observable, Subscription } from "rxjs";
3 |
4 |
5 | // TODO: Add call to API to make sure that a brick can't be reset.
6 | export class Timer {
7 | constructor () { }
8 |
9 | timeElapsed : Date;
10 | timeLeft : Date;
11 | timeLimit : Date;
12 |
13 | timeResolution: number;
14 |
15 | timer : Observable
2 |
--------------------------------------------------------------------------------
/src/app/play/dashboard/dashboard.component.scss:
--------------------------------------------------------------------------------
1 | .dashboard-profile {
2 | margin: 20px
3 | }
4 |
5 | .dashboard-info {
6 | margin: 0;
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/play/dashboard/dashboard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 | import { AuthService } from "../../auth/auth.service";
3 |
4 | @Component({
5 | selector: 'dashboard',
6 | templateUrl: './dashboard.component.html',
7 | styleUrls: ['./dashboard.component.scss']
8 | })
9 | export class DashboardComponent {
10 | constructor(public auth: AuthService) { }
11 | }
--------------------------------------------------------------------------------
/src/app/play/pallet/pallet.component.html:
--------------------------------------------------------------------------------
1 |
3 | ?.photoURL}})
4 |
10 |
5 |
9 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quo commodi nostrum porro enim minus fugiat quam? Id, eveniet est praesentium quae eaque adipisci enim maiores ullam, laborum accusamus voluptate.
6 |Nostrum eos in non quas officiis debitis, vitae laborum neque quidem at numquam dolore commodi saepe vel exercitationem laboriosam! Necessitatibus odit animi vel? Voluptate minima inventore quam saepe et sint.
7 |Modi unde laboriosam iure? Natus libero cupiditate laudantium incidunt ipsum asperiores, vitae delectus quod totam necessitatibus, odit officia voluptas nam rerum excepturi ex minus beatae vel, quos sed fugit? Totam?
8 |
2 |
6 |
7 | {{brick.title}}
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/app/play/pallet/pallet.component.scss:
--------------------------------------------------------------------------------
1 | .pallets-container {
2 | max-width: 75vh;
3 | margin: 0 auto;
4 | .pallet-list {
5 | mat-grid-tile {
6 | p { margin: 10px; }
7 | }
8 | margin: 10px;
9 | }
10 | }
11 |
12 | /* To create the right kind of cursor when hovering over cards */
13 | mat-grid-tile {
14 | cursor: pointer;
15 | }
16 |
17 | .text-inside-grid {
18 | text-align: center;
19 | padding: 2px;
20 | }
--------------------------------------------------------------------------------
/src/app/play/pallet/pallet.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 | import { Pallet, Brick } from "../../schema";
3 | import { ActivatedRoute, ParamMap } from "@angular/router";
4 | import { DatabaseService } from "../../database/database.service";
5 | import { Observable } from "rxjs";
6 |
7 | @Component({
8 | selector: 'pallets',
9 | templateUrl: './pallet.component.html',
10 | styleUrls: ['./pallet.component.scss']
11 | })
12 | export class PalletComponent {
13 | palletId: string;
14 | pallet: Observable
3 |
5 |