UI for Quiz

erpnext/education/doctype/program/program.json

@@ -476,7 +476,7 @@
  "istable": 0, 
  "max_attachments": 0, 
  "menu_index": 0, 
- "modified": "2018-10-30 17:30:55.381657", 
+ "modified": "2018-11-01 18:05:06.781030", 
  "modified_by": "Administrator", 
  "module": "Education", 
  "name": "Program", 
@@ -501,25 +501,6 @@
    "share": 1, 
    "submit": 0, 
    "write": 1
-  }, 
-  {
-   "amend": 0, 
-   "cancel": 0, 
-   "create": 0, 
-   "delete": 0, 
-   "email": 1, 
-   "export": 1, 
-   "if_owner": 0, 
-   "import": 0, 
-   "permlevel": 0, 
-   "print": 1, 
-   "read": 1, 
-   "report": 1, 
-   "role": "Guest", 
-   "set_user_permissions": 0, 
-   "share": 1, 
-   "submit": 0, 
-   "write": 0
   }
  ], 
  "quick_entry": 0, 

erpnext/public/js/education/web-academy/components/ContentArticle.vue

@@ -4,9 +4,9 @@
         <div class='container'>
             <div class="row">
                 <div class="col-md-8">
-                    <h2>{{ content_data.title }}</h2>
+                    <h2>{{ contentData.title }}</h2>
                     <span class="text-muted">
-                        Published on {{ content_data.publish_date }}, by {{ content_data.author }}
+                        Published on {{ contentData.publish_date }}, by {{ contentData.author }}
                     </span>
                 </div>
                 <div class="col-md-4 text-right">
@@ -18,7 +18,7 @@
     </section>
     <section class="article-content-section">
         <div class='container'>
-            <div class="content" v-html="content_data.content"></div>
+            <div class="content" v-html="contentData.content"></div>
             <div class="text-right">
             </div>
             <div class="mt-3 text-right">
@@ -35,7 +35,7 @@ export default {
 	name: 'ContentArticle',
 	data() {
     	return {
-    		content_data: ''
+    		contentData: ''
     	}
     },
     mounted() {
@@ -46,7 +46,7 @@ export default {
     			content_type: this.type
     		}
     	}).then(r => {
-    			this.content_data = r.message
+    			this.contentData = r.message
     	});
     }
 };

erpnext/public/js/education/web-academy/components/ContentQuiz.vue

@@ -1,19 +1,64 @@
 <template>
-	<div>
-		Quiz
-	</div>
+	<section class="quiz-section">
+    <div class='container'>
+        <div class="row">
+            <div class="col-md-8">
+                <h2>{{ content }}</h2>
+            </div>
+        </div>
+        <div class="content">
+            <hr>
+            <form id="quiz" :name="content">
+                <div id="quiz-body">
+					<QuizSingleChoice v-for="question in quizData" :key="question.name" :question="question"/>
+                </div>
+                <div class="mt-3">
+                    <div id="quiz-actions" class="text-right">
+                        <button class='btn btn-outline-secondary' type="reset">Reset</button>
+                        <button class='btn btn-primary' type="button">Submit</button>
+                    </div>
+                    <div id="post-quiz-actions" class="row" hidden="hidden">
+                        <div class="col-md-8 text-left">
+                            <h3>Your Score: <span id="result"></span></h3>
+                        </div>
+                        <div class="col-md-4 text-right">
+                        	<slot></slot>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="mt-3 text-right">
+            <a class="text-muted" href="/report"><i class="octicon octicon-issue-opened" title="Report"></i> Report a
+                Mistake</a>
+        </div>
+    </div>
+</section>
 </template>
 
 <script>
+import QuizSingleChoice from "./Quiz/QuizSingleChoice.vue"
 export default {
-
-  name: 'ContentQuiz',
-
-  data() {
-    return {
-
-    };
-  },
+	props: ['content', 'type'],
+	name: 'ContentQuiz',
+	data() {
+    	return {
+    		quizData: ''
+    	}
+    },
+    mounted() {
+    	frappe.call({
+    		method: "erpnext.www.academy.get_quiz_without_answers",
+    		args: {
+    			quiz_name: this.content,
+    		}
+    	}).then(r => {
+    			this.quizData = r.message
+    	});
+    },
+    components: {
+    	QuizSingleChoice,
+    }
 };
 </script>
 

erpnext/public/js/education/web-academy/components/Quiz/QuizSingleChoice.vue

@@ -0,0 +1,23 @@
+<template>
+	<div class="question mt-4">
+    <h5>{{ question.question }}</h5>
+    <div class="options ml-2">
+        <div v-for="option in question.options" class="form-check pb-1">
+            <input class="form-check-input" type="radio" :name="question.name" :id="option.option" :value="option.option">
+            <label class="form-check-label" :for="option.option">
+                {{ option.option }}
+            </label>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+	props: ['question'],
+	name: 'QuizSingleChoice',
+};
+</script>
+
+<style lang="css" scoped>
+</style>