Democracy Visualization

backend/config/urls.py

@@ -58,6 +58,6 @@ def edx_path(route, component_name):
     edx_path('adventure/', 'ChooseAdventureView'),
     edx_path('map_quiz/', 'MapQuiz'),
     edx_path('budget_voting_simulation/', 'BudgetVotingSimViz'),
-    edx_path('heat_map/', 'DemocracyViz'),
+    edx_path('democracy_quiz/', 'DemocracyViz'),
     edx_path('campaign_game/', 'CampaignView')
 ]

frontend/package.json

@@ -40,6 +40,7 @@
     "jest-resolve": "24.7.1",
     "jest-watch-typeahead": "0.3.0",
     "mini-css-extract-plugin": "0.5.0",
+    "node-sass": "4.13.1",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.2.1",
     "postcss-flexbugs-fixes": "4.1.0",

frontend/src/UILibrary/QuizComponents/answerChoices.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+
+function AnswerChoices(props) {
+    return (
+        <li className="answerChoices">
+            <input
+                type="radio"
+                className="radioCustomButton"
+                name="radioGroup"
+                checked={props.answerType === props.answer}
+                value={props.answerType}
+                disabled={props.answer}
+                onChange={props.onAnswerSelected}
+            />
+            <label className="radioCustomLabel">
+                {props.answerContent}
+            </label>
+        </li>
+    );
+}
+
+AnswerChoices.propTypes = {
+    answerType: PropTypes.bool.isRequired,
+    answerContent: PropTypes.string.isRequired,
+    answer: PropTypes.string.isRequired,
+    onAnswerSelected: PropTypes.func.isRequired
+};
+
+export default AnswerChoices;

frontend/src/UILibrary/QuizComponents/displayScore.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+
+function Score(props) {
+    return (
+        <div className="score">
+            You got <strong>{props.quizScore}</strong>!
+        </div>
+    );
+}
+
+Score.propTypes = {
+    quizScore: PropTypes.string.isRequired,
+};
+
+export default Score;

frontend/src/UILibrary/QuizComponents/quiz.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+
+function Quiz(props) {
+    return (
+        <h2 className="question">{props.content}</h2>
+    );
+}
+
+Quiz.propTypes ={
+    content: PropTypes.string.isRequired
+};
+
+export default Quiz;

frontend/src/UILibrary/QuizComponents/quiz.scss

@@ -0,0 +1,4 @@
+.quizFrame {
+    @extend .float-right;
+    @extend .mr-5;
+}

frontend/src/UILibrary/QuizComponents/quizFrame.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import Quiz from "./quiz";
+import ScoreTracker from "./scoreTracker";
+import AnswerChoices from "./answerChoices";
+
+function QuizFrame(props) {
+    function renderAnswerChoices(key) {
+        return (
+            <AnswerChoices
+                key={key.content}
+                answerContent={key.content}
+                answerType={key.type}
+                answer={props.answer}
+                questionId={props.questionId}
+                onAnswerSelected={props.onAnswerSelected}
+            />
+        );
+    }
+
+    return (
+        <div className="quizFrame">
+            <ScoreTracker
+                counter={props.questionId}
+                total={props.questionTotal}
+                correct={props.correctAnswers}
+            />
+            <Quiz content={props.question} />
+            <div className="answerChoices">
+                {props.answerChoices.map(renderAnswerChoices)}
+            </div>
+        </div>
+    );
+}
+
+QuizFrame.propTypes = {
+    answer: PropTypes.string.isRequired,
+    answerChoices: PropTypes.array.isRequired,
+    counter: PropTypes.number.isRequired,
+    question: PropTypes.string.isRequired,
+    questionId: PropTypes.number.isRequired,
+    questionTotal: PropTypes.number.isRequired,
+    onAnswerSelected: PropTypes.func.isRequired,
+    correctAnswers: PropTypes.number.isRequired,
+};
+
+export default QuizFrame;

frontend/src/UILibrary/QuizComponents/scoreTracker.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+
+function ScoreTracker(props) {
+    return (
+        <div className="scoreTracker">
+            <p>Question <span>{props.counter}</span> of <span>{props.total}</span></p>
+            <p>Score <span>{props.correct}</span> of <span>{props.total}</span></p>
+        </div>
+    );
+}
+
+ScoreTracker.propTypes = {
+    counter: PropTypes.number.isRequired,
+    total: PropTypes.number.isRequired,
+    correct: PropTypes.number.isRequired,
+};
+
+export default ScoreTracker;

frontend/src/UILibrary/styles.scss

@@ -8,3 +8,4 @@
 @import './edx.scss';
 @import "../chooseAdventure/chooseAdventure";
 @import '../campaign/campaign';
+@import 'QuizComponents/quiz.scss';