Guidelines to Implement New Question Type Components

Adding a New Question Type

Since a question which will be presented is a component, we need to create a new component for that question. Using Angular's CLI, we will create a new component. Open a terminal and change to the directory which the frontend is present. In the terminal, write the following:

where 'question-typenmae' is the name of your question type, and execute the command. You should see the following output:

That means that the component can be used by other components.

Later, you need to add to your component the following inputs:

This will allow your question type to get the question data.

You need to add the following output:

This will be used to emit a value whenever someone fills an answer. For example:

You will need to emit a boolean value- true when user has filled/is filling an answer and false when he doesn't fill/isn't filling an answer.

Also, you need to implement to functions inside your component: returnAnswers() and buildAnswer():QuestionAnswer. The first function collects the answers from your component. This is up to you, depends on how you implemented the component. The second function builds the QuestionAnswer which will be stored in the database. It needs to be of this general form:

it is called in question.component.ts to store the answer.

To make a class for your own question type, you need to add a new interface in src/app/models/index.ts that extends Question interface. Also, add a value in TypeQuestion enum with a name of your desire, most preferred your question-type name.

Next, in quetion.component.html (located in src/app/components/test-page/question) add a call to your component directive in the following format:

<app-question-typename *ngIf="question.type==n" [question]="question" [testId]="testId" (answered)="onAnswering($event)"></app-question-typename>

where 'app-question-typename' is your question type name and 'n' is the number of the question type's value in the enum.

It is necessary that the number will be written because Angular can't read enums in html files.