How to add a new type of question

The main goal in developing the system was to create it as much modular as possible. In this guide we will explain how this modularity expressed in adding new types of qeustion, in the code itself. In a few steps and lines of code the fruture developers can add new types of qeustions easily.

Assumptions of the guide:

1. The user has created the view and the logic of the component. We will assume it is called my_question in an Angular format which contains the files – my_question.ts, my_question.html and my_question.css.

2. The user created a TypeScript object that describes the new object. The object should be defined in the file models\index.ts.

3. The user added an enum value to TypeQuestion that describes the new type of question (search for the expression 'TypeQuestion.MyType Mark' in the file models/index.ts)

Guidelines on how to develop a question component for a new question type can be found here

After the user defined the view and the logic behind the new type of question, he would like to add the new type to the create-question component, to enable other users creating this kind of question to future tests. This guide is for understanding how integrating the creation of the new type with the create-question component.

What is the create-question component?

This component is a modal window that pops every time the user wants to add/edit a question in a test. The basic structure of the component is the text of the question and a collapsing setting bar that hold all existing types of question. These setting (text of a question and the type of the question) are common among all the types of question. So, after the user created the view of the question, he needs to create the create-my-question component. This will hold the logic behind creating the new type of question, and the user have the flexibility to define the creation. The user's part is creating this component.

After the user created the create-my-question he would like to integrate the component with the main component create-question and when another user will create a test he could build this question. In the next section we will describe what lines of code the user needs to write in order to integrate the new type of question.

Changes in the create-question.component.ts file:

1. Import the object that represent the new type of question, and the class of the create-my-question component that the user already build. (search for the expression 'Import Mark') The line needs to be in the following format:

   

2. The user need to insert the directive @ViewChild. (search for the expression 'ViewChild Directive Mark') The line needs to be in the following format:

   When CreateMyQuestion is the class of the create-my-question component that the user created. The component that hold the view and logic for creating the new question. This directive enables accessing the component and it's fields, and when the user will want to submit the question, than the create-question component will take the values of the fields inside the specific type of question and construct the requested object.

3. Create a method for setting the type of the question. When the user will build a test he wants that the collapsing menu bar of all types question will react when choosing the type of question. The user will need to create a method for the purpose (search the exprsession 'setMyQuestionType Method Mark'). The lines that are needed to be are in the following format:

   

4. Add a method for assuring the type of the question, will be understood later on. Search for the expression 'didChoseMyType Mark' The lines that are needed to be insert are in the following format:

   

5. Add to the method onSubmit a brunch that fills the object that will be saved in the test. In the create-question there is an object that is called question_object. This object is passed on to the caller of the create-question component. After the user filled it we want to pass it on. This example shows how this is being done on the drill down question:

   

This concludes the changes that are need to be done on the .ts file.

As for the create-question.html, it is even simpler. All we need to do is to call to the component of the creation the new question. This applies for all type of question, in the example we can see the it for the rate question. All we need to do is to call the didChoseMyType() as the condition for creating the question.

And to call the component of the question. One last thing is to add the new type in the drop-down content menu so we could chose to create the new type of question. Search for the mark – Add new type. So, that’s it, we finished adding the new type of question with maximum modularity and with a few lines of code.