Skip to content

Instantly share code, notes, and snippets.

@1276stella
Last active July 9, 2019 17:09
Show Gist options
  • Save 1276stella/702b3c6334e29de65e1e31c752430e32 to your computer and use it in GitHub Desktop.
Save 1276stella/702b3c6334e29de65e1e31c752430e32 to your computer and use it in GitHub Desktop.
Quiz
import Ember from 'ember';
export default Ember.Component.extend({
flowState: 'INTRO',
actions: {
startQuiz() {
this.set('flowState', 'QUIZ');
}
}
});
import Ember from 'ember';
import { QUESTION_TYPES } from '../utils/quiz-helpers';
export default Ember.Component.extend({
init() {
this._super(...arguments);
this._initQuestion();
},
actions: {},
_initQuestion() {
this.set('question', {
questionComponent: QUESTION_TYPES.BASIC_MULTICHOICE,
questionId: 0
});
}
});
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
onInput(value) {
console.log(value);
this.set('selected', value);
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Ember from 'ember';
export function equal(params/*, hash*/) {
return params[0] === params[1];
}
export default Ember.Helper.helper(equal);
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.list-style-none {
list-style-type: none;
}
<h1>Assessment Prototype</h1>
{{assessment-flow}}
{{#if (equal flowState "INTRO")}}
<p>Intro lorem ipsum!</p>
<button onclick={{action "startQuiz"}}>Let's go</button>
{{else if (equal flowState "QUIZ")}}
{{#assessment-quiz as |quiz|}}
{{quiz.questionForm}}
{{quiz.questionId}}
{{/assessment-quiz}}
{{/if}}
Quiz lorem ipsum
{{yield
(hash
questionForm=(component question.questionComponent
question=question
)
questionId=question.questionId
)
}}
<p> This is a basic multichoice question </p>
<ul class="list-style-none">
<li>
<input
id="yes"
type="radio"
name="group-1"
value="A"
onchange={{action "onInput" "A"}}
>
<label for="yes">Yes</label>
</li>
<li>
<input
id="no"
type="radio"
name="group-1"
value="B"
onchange={{action "onInput" "B"}}
>
<label for="no">No</label>
</li>
</ul>
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
export const QUESTION_TYPES = Object.freeze({
MULTILINE_TEXT: 'questions/mutiline-text',
BASIC_MULTICHOICE: 'questions/basic-multichoice',
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment