Skip to content

Commit a7892b0

Browse files
Quiz preview
1 parent ca32507 commit a7892b0

File tree

21 files changed

+315
-637
lines changed

21 files changed

+315
-637
lines changed
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Component from '@ember/component';
2+
import Ember from 'ember';
3+
4+
export default Component.extend({
5+
questionIDs: Ember.computed('quiz.questions.@each', function () {
6+
return this.get('quiz').hasMany('questions').ids()
7+
})
8+
})
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="container-fluid">
2+
<div class="row">
3+
{{#each questionIDs as |num i|}}
4+
<div class="button-solid col-3 m-2">
5+
<a href="#" {{action navigateToQuestion num}} class="white">
6+
<button>{{i}}</button>
7+
</a>
8+
</div>
9+
{{/each}}
10+
</div>
11+
</div>
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Component from '@ember/component';
2+
3+
export default Component.extend({})
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div>
2+
<h3>Question - {{question.title}}</h3>
3+
<p><b>Description -</b> {{question.description}}</p>
4+
<br>
5+
{{#each question.choices as |choice|}}
6+
{{#if question.multicorrect}}
7+
<input type="checkbox" name="questionChoices" value="{{choice.id}}"> {{choice.title}} <br>
8+
{{else}}
9+
<input type="radio" name="questionChoices" value="{{choice.id}}"> {{choice.title}} <br>
10+
{{/if}}
11+
{{choice.description}}<br><br>
12+
{{/each}}
13+
<br><br>
14+
</div>
Lines changed: 99 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,112 @@
11
<div class="container">
2-
<div class="row">
3-
<div class="col-4"></div>
4-
<div class="col-6">
5-
<h1>Add new Quiz:</h1>
6-
</div>
7-
</div>
8-
<div class="row justify-content-center align-items-center">
9-
<div class="col-2">
10-
<label>Title *</label>
11-
</div>
12-
<div class="col-6 input-group">
13-
{{input type="text" class="input-text" value=quiz.title}}
14-
</div>
15-
<div class="col-3">
16-
{{markdown-to-html quiz.title}}
17-
</div>
18-
</div>
19-
<div class="row justify-content-center align-items-center">
20-
<div class="col-2">
21-
<label>Description *</label>
22-
</div>
23-
<div class="col-6 input-group">
24-
{{textarea type="text" class="input-text py-4" value=quiz.description}}
25-
</div>
26-
<div class="col-3">
27-
{{markdown-to-html quiz.description extensions='katex'}}
28-
</div>
29-
</div>
30-
{{#unless quiz.isNew}}
312
<div class="row">
32-
<div class="col-2">
33-
<label>Questions</label>
34-
</div>
35-
<div class="col-6">
36-
{{#power-select-multiple
37-
search=(perform questionFilterTask)
38-
selected=quiz.questions
39-
onchange=(action (mut quiz.questions ))
40-
as |question|}}
41-
{{question.title}}
42-
{{/power-select-multiple}}
43-
</div>
44-
</div>
45-
{{/unless}}
3+
<div class="col-4"></div>
4+
<div class="col-6">
5+
<h1>Add new Quiz:</h1>
6+
</div>
7+
</div>
8+
<div class="row justify-content-center align-items-center">
9+
<div class="col-2">
10+
<label>Title *</label>
11+
</div>
12+
<div class="col-6 input-group">
13+
{{input type="text" class="input-text" value=quiz.title}}
14+
</div>
15+
<div class="col-3">
16+
{{markdown-to-html quiz.title}}
17+
</div>
18+
</div>
19+
<div class="row justify-content-center align-items-center">
20+
<div class="col-2">
21+
<label>Description *</label>
22+
</div>
23+
<div class="col-6 input-group">
24+
{{textarea type="text" class="input-text py-4" value=quiz.description}}
25+
</div>
26+
<div class="col-3">
27+
{{markdown-to-html quiz.description extensions='katex'}}
28+
</div>
29+
</div>
30+
{{#unless quiz.isNew}}
31+
<div class="row">
32+
<div class="col-2">
33+
<label>Questions</label>
34+
</div>
35+
<div class="col-6">
36+
{{#power-select-multiple
37+
search=(perform questionFilterTask)
38+
selected=quiz.questions
39+
onchange=(action (mut quiz.questions ))
40+
as |question|}}
41+
{{question.title}}
42+
{{/power-select-multiple}}
43+
</div>
44+
</div>
45+
{{/unless}}
4646

47-
<div class="row justify-content-center align-items-center">
48-
<div class="col-2">
49-
<label>Image Url *</label>
50-
</div>
51-
<div class="col-6 input-group">
52-
{{input type="text" class="input-text" value=quiz.image}}
47+
<div class="row justify-content-center align-items-center">
48+
<div class="col-2">
49+
<label>Image Url *</label>
50+
</div>
51+
<div class="col-6 input-group">
52+
{{input type="text" class="input-text" value=quiz.image}}
53+
</div>
5354
</div>
54-
</div>
5555

56-
<div class="row justify-content-center align-items-center">
57-
<div class="col-2">
58-
<label>Duration *</label>
56+
<div class="row justify-content-center align-items-center">
57+
<div class="col-2">
58+
<label>Duration *</label>
59+
</div>
60+
<div class="col-6 input-group">
61+
{{input type="text" class="input-text" value=quiz.duration}}
62+
</div>
63+
</div>
64+
<div class="row justify-content-center align-items-center">
65+
<div class="col-2">
66+
<label>Max Attempts *</label>
67+
</div>
68+
<div class="col-6 input-group">
69+
{{input type="text" class="input-text" value=quiz.maxAttempts}}
70+
</div>
5971
</div>
60-
<div class="col-6 input-group">
61-
{{input type="text" class="input-text" value=quiz.duration}}
62-
</div>
63-
</div>
64-
<div class="row justify-content-center align-items-center">
65-
<div class="col-2">
66-
<label>Max Attempts *</label>
67-
</div>
68-
<div class="col-6 input-group">
69-
{{input type="text" class="input-text" value=quiz.maxAttempts}}
70-
</div>
71-
</div>
72-
<div class="row">
73-
<div class="col-2">
74-
<label>Start Date *</label>
75-
</div>
76-
<div class="col-6">
77-
{{ember-datetime-picker value=startDateMoment }}
78-
{{!-- {{input type="text" value=quiz.startDate}} --}}
79-
</div>
80-
</div>
81-
<div class="row">
82-
<div class="col-2">
83-
<label>End Date *</label>
72+
<div class="row">
73+
<div class="col-2">
74+
<label>Start Date *</label>
75+
</div>
76+
<div class="col-6">
77+
{{ember-datetime-picker value=startDateMoment }}
78+
{{!-- {{input type="text" value=quiz.startDate}} --}}
79+
</div>
8480
</div>
85-
<div class="col-6">
86-
{{ember-datetime-picker value=endDateMoment }}
81+
<div class="row">
82+
<div class="col-2">
83+
<label>End Date *</label>
84+
</div>
85+
<div class="col-6">
86+
{{ember-datetime-picker value=endDateMoment }}
8787

88-
{{!-- {{input type="text" value=quiz.endDate}} --}}
88+
{{!-- {{input type="text" value=quiz.endDate}} --}}
89+
</div>
8990
</div>
90-
</div>
9191

92-
<div class="row">
93-
<div class="col-4"></div>
94-
<div class="col-6">
95-
<div class="button-solid">
96-
<button {{action 'save'}}>Save Changes</button>
97-
</div>
92+
<div class="row">
93+
<div class="col-2"></div>
94+
{{#if quiz.id}}
95+
<div class="col-4">
96+
<div class="button-solid">
97+
<a class="white" href="{{quiz.id}}/preview">
98+
<button>Preview</button>
99+
</a>
100+
</div>
101+
</div>
102+
{{/if}}
103+
<div class="col-2"></div>
104+
<div class="col-4">
105+
<div class="button-solid">
106+
<button {{action 'save'}}>Save Changes</button>
107+
</div>
108+
</div>
98109
</div>
99-
</div>
110+
100111
</div>
101112

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import Controller from '@ember/controller';
22

33
export default Controller.extend({
4-
actions: {
5-
saveQuiz () {
6-
return this.get('model').save()
4+
actions: {
5+
saveQuiz() {
6+
return this.get('model').save()
7+
}
78
}
8-
}
99
});

app/pods/quiz/id/index/route.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Route from '@ember/routing/route';
2+
3+
export default Route.extend({
4+
model(params) {
5+
return this.modelFor('quiz/id')
6+
}
7+
});
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{{quiz-editor quiz=model onSave=(action 'saveQuiz')}}
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Controller from '@ember/controller';
2+
3+
export default Controller.extend({
4+
queryParams: ['questionId'],
5+
actions: {
6+
navigate(questionNumber) {
7+
this.set('question', questionNumber)
8+
}
9+
},
10+
})

app/pods/quiz/id/preview/route.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Route from '@ember/routing/route';
2+
import RSVP from 'rsvp';
3+
4+
export default Route.extend({
5+
queryParams: {
6+
questionId: {
7+
refreshModel: true
8+
}
9+
},
10+
model(params) {
11+
const quiz = this.modelFor('quiz/id')
12+
const questionId = params.questionId || quiz.hasMany('questions').ids()[0]
13+
if (!questionId) {
14+
//In case there are no questions in the quiz
15+
return {quiz}
16+
}
17+
const question = this.store.findRecord('question', questionId)
18+
return RSVP.hash({quiz, question})
19+
},
20+
setupController(controller, model) {
21+
controller.set('quiz', model.quiz)
22+
controller.set('question', model.question)
23+
}
24+
});

0 commit comments

Comments
 (0)