I am creating an Angular application: a training engine that will provide online courses to the user.
Each course is basically a series of “slides” —partial parts of HTML that the user can navigate sequentially. Each slide can include zero or more interactive widgets of various types: simple quizzes, practical exercises, etc.
My goal is for courses to be composed of pure HTML / CSS so that less technical people can create courses without trying to get their hands on it with JS or Angular. This is great if courses only contain static HTML. But it becomes difficult for me when I want to add interactive widgets to the course.
For example, an example “slide” might look like this:
<p>Here some static content introducing the quiz.</p>
<div class="quiz">
<ol class="questions" data-passing-score="50">
<li>
<p>What was Abraham Lincoln last name?</p>
<ul class="answers">
<li>Smith</li>
<li>Johnson</li>
<li class="correct">Lincoln</li>
<li>Liebowitz</li>
</ul>
</li>
<li>
<p>What were George Washington false teeth made of?</p>
<ul class="answers">
<li>Particle board</li>
<li class="correct">Wood</li>
<li>The bones of his enemies</li>
<li>Advanced space-age polymers</li>
</ul>
</li>
</ol>
</div>
<p>Here some static content that appears after the quiz.</p>
... and when this HTML file is loaded (presumably via $http.get()), my application would notice that it contains divwith the class quizand set the necessary interactivity: setting up the markup structure (for example, adding switches and the submit button), possibly hiding and showing the elements ( so that the user will see only one question at a time), taking the quiz when submitting, etc.
This is a fairly common pattern in jQuery-land. Of course, we are not in jQuery-land.
If I think about it correctly, there are two problems that I will need to solve in order to complete this work.
1: HTML JavaScript. , HTML :
var quiz = {
passing_score: 50,
questions: [
{
ask: "What was Abraham Lincoln last name?",
answers: [
{ text: "Smith", correct: false },
{ text: "Johnson", correct: false },
{ text: "Lincoln", correct: true },
{ text: "Liebowitz", correct: false }
]
},
...
]
};
, HTML DOM ( , ), ( jQuery jqLite), .
? , ?
2: -, div.quiz HTML :
<form ng-controller="QuizController as quizCtrl" ng-submit="quizCtrl.submit()">
<ol>
<li ng-repeat="question in quizCtrl.questions">
<p ng-bind-html="question.ask"></p>
<ul>
<li ng-repeat="answer in question.answers">
<label>
<input type="radio" ng-attr-name="{{ 'q' + $parent.$index }}" ng-model="question.selected_answer" ng-value="answer">
<span ng-bind-html="answer.text"></span>
</label>
</li>
</ul>
</li>
</ol>
<button type="submit">Score Quiz</button>
</form>
... div QuizController.
DOM node ? ( ) ?
Angular -land? ?
, . , !