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 < ***@***.***> 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 <#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