Create a quiz component

[kirjs]

Create a component that would quiz the user, giving:

• a question (which can be HTML - use ng-content)
• A list of answers, one of which is correct

After the user choses an option, correct answer is displayed in place of the question.

The API can get a bit tricky here, so I would recommend posting the API design first before implementing.

[marvinrusinek]

Hi Kirill,

I was thinking of working on this. I think there should be a JSON file with questions and answers. Each question object should look like:

questionUnit
questionNumber
questionStatement
options - array of 4 possible answer options A. blah, B. blah, C. blah, D. blah
correctAnswer
reasoning

I was thinking to use a QuizService to extract the q&a from the JSON file and display in the quiz.component.html template.

If selected answer is chosen, mark answer as correct - highlight the selected box green, otherwise highlight red (maybe say "Try again") and immediately show correct answer and provide feedback.

Please let me know if I can work on this and if this is okay before I start coding it.

Thanks. Marvin

[NothingEverHappens]

Hey Marvin, Thanks for looking at the feature and for analysis.

1. As it is a component is should be agnostic as of how exactly questions are stored as long as the interface is well defined. (e.g. json files and QuizService should be out of scope for this feature)

2. The list of fields seems reasonable, would be amazing to have it as a TypeScript interface (also I'm not sure what is the significance of questionUnit and questionNumber?)

3. Question most likely would come as ng-content, giving us more flexibility

I'd love you to work on this feature, the next steps would be:

1. Finalize the API (e.g. what are the exact imports and their types)
2. Build a quick prototype to see how it works for an API, a good home for the component would probably be in this folder: https://github.com/codelab-fun/codelab/tree/master/apps/codelab/src/app/components
3. You can test it by plugging into existing presentation, e.g. here: https://github.com/codelab-fun/codelab/blob/master/apps/codelab/src/app/codelabs/angular/typescript/typescript/typescript.component.html

feel free to ping me here or in slack with any questions

[marvinrusinek]

Hey Kirill,

Thanks for adding me to the channel! I'm working on the quiz component and was thinking that each question should probably be on its own page displaying one question at a time using routing or rxjs (and possibly having the ability to page through the questions). Please let me know.

Thanks, Marvin

[NothingEverHappens]

each question should probably be on its own page

I'd suggest at this point for a component to have one question, let's for now keep page breakdown, routing and rxjs outside of the scope

[marvinrusinek]

I went ahead and made each question on its own page. I'm still working on a couple things.

[marvinrusinek]

Hey @NothingEverHappens , still working on couple things. Should be ready for primetime soon, I hope. I will send you the link to the live project and source code when I'm done. How do I test it in Codelab?

[NothingEverHappens]

Hey Marvin, that's awesome! Will you have some time on Wed or Thursday to come to one of the codelab meetings? We can test it together

[marvinrusinek]

Hi Kirill,

Thursday is probably better for me. Is the meeting at Panera?

Marvin

On Tue, Oct 22, 2019 at 11:41 AM NothingEverHappens < notifications@github.com> wrote:

Hey Marvin, that's awesome! Will you have some time on Wed or Thursday to come to one of the codelab meetings? We can test it together

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/codelab-fun/codelab/issues/1028?email_source=notifications&email_token=ABLUC742SAVP2KPYUBEVAF3QP4UKRA5CNFSM4IUDUBYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEB6M67Q#issuecomment-545050494, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLUC744INPWYEM5GAL6JXTQP4UKRANCNFSM4IUDUBYA .

[NothingEverHappens]

Yes

[marvinrusinek]

Hi Kirill,

I downgraded Node to version 10 as you suggested and reforked codelab and installed npm and associated dependencies, but now am getting this error when I tried to run "npm start playground", I keep getting this message: ERROR in The ngcc compiler has changed since the last ngcc build. Please remove "C:/Users/multi/Desktop/quiz/node_modules" and try again. So I've done this and nothing changed.

and when I run ng serve in C:\Users\multi\Desktop\quiz\codelab\apps\playground\src\app, I get: ERROR in C:/Users/multi/Desktop/quiz/codelab/libs/code-demos/src/lib/shared/sandbox.ts Module not found: Error: Can't resolve 'systemjs/dist/system.src' in 'C:\Users\multi\Desktop\quiz\codelab\libs\code-demos\src\lib\shared' I checked in node_modules, but this file isn't in systemjs or raw-loader... maybe it's because I downgraded?

Please could you help me with this.

Thanks, Marvin

[marvinrusinek]

Hi Kirill,

I've got the quiz running in playground (run with "npm start playground-quiz") and created PR #1220 and closed #1214. Please can you take a look at it.

Thanks, Marvin

[marvinrusinek]

Hi Kirill,

I think I've got the functionality down and working as close to perfectly as possible for now. Please could you take a look at it: PR #1229 . I would like to see how it runs within Codelab presentation, some things may need to change.

Thank you, Marvin

[marvinrusinek]

Hi Kirill,

Thanks for meeting for Codelab last evening. Just wanted to confirm what the interface should look like before I start coding (see below) :

Have a good weekend. Marvin

Quiz.ts: import { QuizQuestion } from './QuizQuestion';

export interface Quiz { abstract: string; // a sentence about the quiz image: string; // path to image or img file questions: Array; }

---

QuizQuestion.ts: import { Option } from './Option';

export interface QuizQuestion { questionText: string; options: Option[]; answer: Array; explanation: string; }

Option.ts: export interface Option { text: string; correct: boolean; }

[NothingEverHappens]

LGTM

Also you'll need an interface for results:

interface Result {
   time: number;
  answers: number[]
}
type Results = Result[];

[marvinrusinek]

Yes, that's right. Thank you!

[marvinrusinek]

Hi Kirill,

I'm trying to run the quiz app, but getting this error on the console. Something to do with monaco config...

VM64:1 Uncaught SyntaxError: Unexpected identifier at monaco-config.service.ts:38 at new ZoneAwarePromise (zone-evergreen.js:872) at Module.../../libs/code-demos/src/lib/shared/monaco-config.service.ts (monaco-config.service.ts:34) at webpack_require (bootstrap:84) at Module.../../libs/code-demos/src/lib/shared/index.ts (index.ts:1) at webpack_require (bootstrap:84) at Module.../../libs/code-demos/src/lib/index.ts (index.ts:1) at webpack_require (bootstrap:84) at Module.../../libs/code-demos/src/index.ts (index.ts:1) at webpack_require (bootstrap:84) (anonymous) @ monaco-config.service.ts:38 ZoneAwarePromise @ zone-evergreen.js:872 ../../libs/code-demos/src/lib/shared/monaco-config.service.ts @ monaco-config.service.ts:34 webpack_require @ bootstrap:84 ../../libs/code-demos/src/lib/shared/index.ts @ index.ts:1 webpack_require @ bootstrap:84 ../../libs/code-demos/src/lib/index.ts @ index.ts:1 webpack_require @ bootstrap:84 ../../libs/code-demos/src/index.ts @ index.ts:1 webpack_require @ bootstrap:84 ../../libs/code-demos/index.ts @ index.ts:1 webpack_require @ bootstrap:84 ./src/app/app.module.ts @ app.module.ts:1 webpack_require @ bootstrap:84 ./src/main.ts @ main.ts:1 webpack_require @ bootstrap:84 0 @ main.ts:13 webpack_require @ bootstrap:84 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.js:1 zone-evergreen.js:659 Unhandled Promise rejection: Cannot read property 'config' of undefined ; Zone: ; Task: null ; Value: TypeError: Cannot read property 'config' of undefined at monaco-config.service.ts:40 at new ZoneAwarePromise (zone-evergreen.js:872) at Module.../../libs/code-demos/src/lib/shared/monaco-config.service.ts (monaco-config.service.ts:34) at webpack_require (bootstrap:84) at Module.../../libs/code-demos/src/lib/shared/index.ts (index.ts:1) at webpack_require (bootstrap:84) at Module.../../libs/code-demos/src/lib/index.ts (index.ts:1) at webpack_require (bootstrap:84) at Module.../../libs/code-demos/src/index.ts (index.ts:1) at webpack_require (bootstrap:84) TypeError: Cannot read property 'config' of undefined at http://localhost:4200/main.js:2175:17 at new ZoneAwarePromise (http://localhost:4200/polyfills.js:1094:33) at Module.../../libs/code-demos/src/lib/shared/monaco-config.service.ts (http://localhost:4200/main.js:2170:35) at webpack_require (http://localhost:4200/runtime.js:85:30) at Module.../../libs/code-demos/src/lib/shared/index.ts (http://localhost:4200/main.js:2061:80) at webpack_require (http://localhost:4200/runtime.js:85:30) at Module.../../libs/code-demos/src/lib/index.ts (http://localhost:4200/main.js:1309:65) at webpack_require (http://localhost:4200/runtime.js:85:30) at Module.../../libs/code-demos/src/index.ts (http://localhost:4200/main.js:312:62) at webpack_require (http://localhost:4200/runtime.js:85:30) api.onUnhandledError @ zone-evergreen.js:659 handleUnhandledRejection @ zone-evergreen.js:681 api.microtaskDrainDone @ zone-evergreen.js:674 drainMicroTaskQueue @ zone-evergreen.js:577 Promise.then (async) scheduleMicroTask @ zone-evergreen.js:553 resolvePromise @ zone-evergreen.js:803 ZoneAwarePromise @ zone-evergreen.js:875 ../../libs/code-demos/src/lib/shared/monaco-config.service.ts @ monaco-config.service.ts:34 webpack_require @ bootstrap:84 ../../libs/code-demos/src/lib/shared/index.ts @ index.ts:1 webpack_require @ bootstrap:84 ../../libs/code-demos/src/lib/index.ts @ index.ts:1 webpack_require @ bootstrap:84 ../../libs/code-demos/src/index.ts @ index.ts:1 webpack_require @ bootstrap:84 ../../libs/code-demos/index.ts @ index.ts:1 webpack_require @ bootstrap:84 ./src/app/app.module.ts @ app.module.ts:1 webpack_require @ bootstrap:84 ./src/main.ts @ main.ts:1 webpack_require @ bootstrap:84 0 @ main.ts:13 webpack_require @ bootstrap:84 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.js:1 compile-ts-files.ts:31 Uncaught TypeError: Cannot read property 'System' of undefined at Module.../../libs/code-demos/src/lib/runner/compile-ts-files.ts (compile-ts-files.ts:31) at webpack_require (bootstrap:84) at Module.../../libs/code-demos/src/lib/code-demo/code-demo.component.ts (code-demo.component.ts:1) at webpack_require (bootstrap:84) at Module.../../libs/code-demos/src/lib/code-demo.module.ts (code-demo.module.ts:1) at webpack_require (bootstrap:84) at Module.../../libs/code-demos/src/lib/index.ts (index.ts:1) at webpack_require (bootstrap:84) at Module.../../libs/code-demos/src/index.ts (index.ts:1) at __webpack_require__ (bootstrap:84)

[marvinrusinek]

I downloaded and installed the latest codelab, that's maybe why I'm getting the errors... EDIT: I removed the code-demos folder and commented out the monaco stuff and it seems to be working fine now.

[NothingEverHappens]

I'm going to push the Angular 9 version in a couple days which should be working

On Sat, Feb 29, 2020, 5:41 PM Marvin Rusinek notifications@github.com wrote:

I downloaded and installed the latest codelab, that's probably why I'm getting the errors...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/codelab-fun/codelab/issues/1028?email_source=notifications&email_token=AABU2XDZZPBPRQ2RI4Z22WDRFGHIPA5CNFSM4IUDUBYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENMH3VQ#issuecomment-593001942, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABU2XGQZ5SBDMMVGH37CKDRFGHIPANCNFSM4IUDUBYA .

[marvinrusinek]

I tried updating to the latest codelab, but I am getting a bunch of errors with the immer package.

[marvinrusinek]

I was thinking of switching to mat-checkbox or maybe even a mat-selection-list since we may have more than one correct option per question now... Please let me know what behavior you want. Thanks.

[NothingEverHappens]

It seems like we want a new question type that would determine where it's only one question or multiple ones?

[marvinrusinek]

I'm going to push the Angular 9 version in a couple days which should be working … On Sat, Feb 29, 2020, 5:41 PM Marvin Rusinek @.***> wrote: I downloaded and installed the latest codelab, that's probably why I'm getting the errors... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1028?email_source=notifications&email_token=AABU2XDZZPBPRQ2RI4Z22WDRFGHIPA5CNFSM4IUDUBYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENMH3VQ#issuecomment-593001942>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABU2XGQZ5SBDMMVGH37CKDRFGHIPANCNFSM4IUDUBYA .

I'm getting this Babel error now when I tried to install the latest Codelab: vendor.js:132733 Uncaught ReferenceError: process is not defined at Object.../../node_modules/@babel/types/lib/definitions/core.js (vendor.js:132733) at webpack_require__ (runtime.js:85) at Object.../../node_modules/@babel/types/lib/definitions/index.js (vendor.js:134824) at webpack_require (runtime.js:85) at Object.../../node_modules/@babel/types/lib/builders/builder.js (vendor.js:130275) at __webpack_require (runtime.js:85) at Object.../../node_modules/@babel/types/lib/builders/generated/index.js (vendor.js:130635) at webpack_require__ (runtime.js:85) at Object.../../node_modules/@babel/types/lib/utils/react/cleanJSXElementLiteralChild.js (vendor.js:136962) at webpack_require__ (runtime.js:85)

[marvinrusinek]

It seems like we want a new question type that would determine where it's only one question or multiple ones?

So if there is more than one correct answer it would detect it and switch to mat-checkbox?

[kirjs]

I'd say have an explicit type, what if there's multi option question but with one answer?12:54 PM, March 6, 2020, Marvin Rusinek notifications@github.com: It seems like we want a new question type that would determine where it's only one question or multiple ones?

So if there is more than one correct answer it would detect it and switch to mat-checkbox?

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or unsubscribe. Sent from Yandex.Mail for mobile: http://m.ya.ru/ymail

[marvinrusinek]

I'm working on the app and my laptop crashed and is in repair so I transferred to my other laptop and I'm getting this error in the console when trying to run the app:

Uncaught ReferenceError: process is not defined at Object.../../node_modules/@babel/types/lib/definitions/core.js (vendor.js:133069) at webpack_require__ (runtime.js:85) at Object.../../node_modules/@babel/types/lib/definitions/index.js (vendor.js:135192) at webpack_require (runtime.js:85) at Object.../../node_modules/@babel/types/lib/builders/builder.js (vendor.js:130507) at __webpack_require (runtime.js:85) at Object.../../node_modules/@babel/types/lib/builders/generated/index.js (vendor.js:130871) at webpack_require__ (runtime.js:85) at Object.../../node_modules/@babel/types/lib/utils/react/cleanJSXElementLiteralChild.js (vendor.js:137453) at webpack_require__ (runtime.js:85)

EDIT: okay eliminated that error with:

in index.html but getting another error: core.js:6228 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'quiz' Error: Cannot match any routes. URL Segment: 'quiz' at ApplyRedirects.noMatchError (router.js:4396) at CatchSubscriber.selector (router.js:4360) at CatchSubscriber.error (catchError.js:29) EDIT2: got it working (was missing the QuizRoutingModule inside the root app.module.ts file), now need to work on styling, seems to be missing when IntroductionComponent loads EDIT3: styling works for IntroductionComponent, just have this async error now (see next post).

[marvinrusinek]

I'm getting this async error when trying to load the question route:

:4200/vendor.js:35048 ERROR Error: Uncaught (in promise): Error: The pipe 'async' could not be found! Error: The pipe 'async' could not be found! at getPipeDef$1 (:4200/vendor.js:62683) at Module.ɵɵpipe (:4200/vendor.js:62641) at DependencyInjectionQuizComponent_Template (:4200/quiz-routing-quiz-routing-module.js:17550) at executeTemplate (:4200/vendor.js:40183) at renderView (:4200/vendor.js:39953) at renderComponent (:4200/vendor.js:41532) at renderChildComponents (:4200/vendor.js:39754) at renderView (:4200/vendor.js:39979) at ComponentFactory$1.create (:4200/vendor.js:60032) at ViewContainerRef.createComponent (:4200/vendor.js:43689) at resolvePromise (:4200/polyfills.js:1020) at resolvePromise (:4200/polyfills.js:972) at :4200/polyfills.js:1082 at ZoneDelegate.invokeTask (:4200/polyfills.js:621) at Object.onInvokeTask (:4200/vendor.js:66728) at ZoneDelegate.invokeTask (:4200/polyfills.js:620) at Zone.runTask (:4200/polyfills.js:389) at drainMicroTaskQueue (:4200/polyfills.js:791) at ZoneTask.invokeTask [as invoke] (:4200/polyfills.js:706) at invokeTask (:4200/polyfills.js:1843)

EDIT: disabled Ivy and the error went away. I'm getting another error from ResultsComponent in the console: TypeError: Cannot read property '0' of undefined at Object.updateRendere

[NothingEverHappens]

Do you have the latest from master?

[marvinrusinek]

It's okay, I fixed the errors. I'm still working on it.

[marvinrusinek]

Hi Kirill,

I'm almost done with the base app, still working on a couple things, but can demo it at a Codelab soon and would appreciate it if you could do a code review as well.

Marvin

[marvinrusinek]

Hi Kirill,

Please could you do a code review of this branch: https://github.com/marvinrusinek/codelab-angular-10-quiz-app/tree/quiz. I can do a demo on Codelab meeting as well.

Marvin

[marvinrusinek]

Hi Kirill,

I think I made most of the corrections. I will upload the code to GitHub soon.

Marvin

[marvinrusinek]

I uploaded the code but the change history isn't there.

[marvinrusinek]

I found the file with the change history in my codelab-angular-10-quiz-app hidden files and copied it over to my codelab folder in the hidden files, but now need to upload that hidden file, not sure how.