AngularJS: Different Views and Different Controller by Data

Question

Lets assume I want to make a quiz page. I have different question types. I.e. the task is to find the right order, to choose one answer, to choose multiple answers, or to fill some spaces with predefined words and so on. So, I have 5 questions in my data context. 2 of them are multiple-choice, 1 is a right order question and the other 2 are clozes. The main point is: I have no clue how many different question types are in the current quiz. All of them need an own view, an own controller and an own data model, because there is no universal data model that applies for clozes and for right-order-questions at the same time (correct me, if I am wrong).

What is the best way in AngularJS and MVC-pattern in general to do this? Is this even applicable? Does this contradicts the MVC-pattern in general?

I guess Moodle (LMS) does something similar to your requirements, it can handle different type of questions / question types. Have a look at it. — CodeTweetie
– CodeTweetie, Commented Feb 8, 2016 at 22:02

Jason Goemaat · Accepted Answer · 2016-02-08 22:57:44Z

1

So you have 5 questions, I'd do an ng-repeat over the questions and ng-switch on each of the views you want.

<div ng-repeat="question in questions" ng-switch="question.questionType">
  <div ng-switch-when="MultipleChoice" ng-controller="MultipleChoiceCtrl">
    ... multiple choice
  </div>
  <div ng-switch-when="RightOrder" ng-controller="RightOrderCtrl">
    ... right order
  </div>
</div>

answered Feb 8, 2016 at 22:57

Jason Goemaat

29.3k15 gold badges89 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amy Blankenship · Accepted Answer · 2016-02-08 22:48:58Z

0

The way we do it is to start with the data. Most of our sections have only one type of question, but several can have two or more types of question. Each question type has a factory that can take the JSON that started out as XML and was run through a conversion process and adds in all the "hooks" each question needs. We have something called a "questionBuilder" that looks at a questionType property on each section and looks in the $injector for questionType + 'Factory'.

Edit: You can think of a builder as like when you order something from Amazon. Amazon has no idea how to make a coffee pot or a can of tennis balls. What it does have is a long list of suppliers that do know how to make these things. So when you order from Amazon, it goes in its list of factories that supply these things, pulls out the one that can make a coffee pot, and asks the factory for a coffee pot. It then sticks it in a box and ships it to you.

Angular is like the UPS. It doesn't know or care what's in the box. When you get to the View, you pull out the boxes that are the questions you care about at the moment. Your View understands the question type (just like you know how to use that coffee pot, or you can find out).

Conveniently, Angular is also like the list of suppliers (or the $injector is). Anything the $injector knows about, you can pull out in your builder, which is how you can have whatever factories you need without cluttering up your code with a bunch of logic to hard-code the dependencies on particular factories. You're looking in the $injector for the factory that matches the question type specified in the data.

If there is more than one question type in the section, we put down "composite" for the questionType. The compositeFactory looks at a property of each question to figure out where to look in the $injector for the factory. It also looks at information in the section that tells it to add a property to each question that tells a view further down the line which partial to use in an ng-include.

Each question type has its own feature directory that contains a module that says what routes match what views that go with that feature (some of our question types have different variations based on client needs). The composite feature has single view that basically just pulls in the ng-include partial that was added in the factory earlier. The partial might be either directly something from one of the feature directories or a wrapper for one of the feature directives, depending on exactly what we need and how it was originally built.

edited Feb 8, 2016 at 22:48

answered Feb 8, 2016 at 21:59

Amy Blankenship

7,0613 gold badges27 silver badges51 bronze badges

3 Comments

Christopher300 Over a year ago

I didn't quite understood what a Builder is and how this applies to Angular.

Amy Blankenship Over a year ago

Angular itself doesn't really include a business logic layer, so you have to add it. There is nothing in Angular that stops you from doing it. We do it after logging in the user so we know which Assessment to load. Basically, we do a first pass where we read an XML file and build an assessmentMaster that's in charge of keeping up with where we are in the overall Assessment. It builds, but does not populate, each section data object with information like where is the xml for this section. Before navigating to each section, we call section.load(), which loads and builds the questions.

Amy Blankenship Over a year ago

You don't have to do it how we do, and our logic probably doesn't match what you need--I'm just giving an outline of we have as an example of how you can do your own thing on top of angular.

Collectives™ on Stack Overflow

AngularJS: Different Views and Different Controller by Data

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related