Added explanation to questions

Author: DigitalFlow

dataBaseSchema.sql

@@ -104,10 +104,11 @@ ALTER TABLE post OWNER TO postgres;
 
 CREATE TABLE question (
     id uuid DEFAULT public.gen_random_uuid() NOT NULL,
-    key character varying(255),
+    key character varying(255) NOT NULL,
     text text,
     certification_id uuid,
-    "position" integer
+    "position" integer,
+    explanation text
 );
 
 
@@ -172,6 +173,14 @@ ALTER TABLE ONLY post
     ADD CONSTRAINT post_pkey PRIMARY KEY (id);
 
 
+--
+-- Name: question question_key_certification_id_unique; Type: CONSTRAINT; Schema: open_certification_trainer; Owner: postgres
+--
+
+ALTER TABLE ONLY question
+    ADD CONSTRAINT question_key_certification_id_unique UNIQUE (key, certification_id);
+
+
 --
 -- Name: question question_pkey; Type: CONSTRAINT; Schema: open_certification_trainer; Owner: postgres
 --

src/components/PostEditView.tsx

@@ -26,6 +26,7 @@ export default class PostEditView extends React.PureComponent<IBaseProps, PostEd
         this.markdownChanged = this.markdownChanged.bind(this);
         this.save = this.save.bind(this);
         this.delete = this.delete.bind(this);
+        this.openHelp = this.openHelp.bind(this);
     }
 
     componentDidMount() {
@@ -107,6 +108,10 @@ export default class PostEditView extends React.PureComponent<IBaseProps, PostEd
       });
     }
 
+    openHelp() {
+        window.open("https://github.github.com/gfm/", "about:blank");
+    }
+
     render() {
         if (!this.state.post) {
           return <p>Loading</p>;
@@ -117,6 +122,7 @@ export default class PostEditView extends React.PureComponent<IBaseProps, PostEd
             <MessageBar message= { this.state.message } errors={ this.state.errors } />
             <ButtonToolbar>
               <ButtonGroup>
+                <Button bsStyle="default" onClick={ this.openHelp }>Help</Button>
                 <Button bsStyle="default" onClick={ this.save }>Save</Button>
               </ButtonGroup>
               <ButtonGroup>

src/components/PostView.tsx

@@ -10,7 +10,7 @@ export interface PostViewProps {
 
 const PostView = ( props: PostViewProps ) => (
   <Panel>
-    <p style={ { "text-align": "right" } }>{ new Date(props.post.created_on).toTimeString() }</p>
+    <p style={ { "text-align": "right" } }>{ props.post.created_on }</p>
 
     <ReactMarkdown
       key={ props.post.id }

src/components/QuestionEditView.tsx

@@ -23,6 +23,7 @@ export default class QuestionEditView extends React.PureComponent<QuestionEditVi
         this.addAnswer = this.addAnswer.bind(this);
         this.deleteAnswer = this.deleteAnswer.bind(this);
         this.onQuestionTextChange = this.onQuestionTextChange.bind(this);
+        this.onQuestionExplanationChange = this.onQuestionExplanationChange.bind(this);
         this.onQuestionKeyChange = this.onQuestionKeyChange.bind(this);
     }
 
@@ -38,6 +39,10 @@ export default class QuestionEditView extends React.PureComponent<QuestionEditVi
         return true;
       }
 
+      if (q.explanation !== nq.explanation) {
+        return true;
+      }
+
       if (!q.answers && nq.answers) {
         return true;
       }
@@ -57,7 +62,6 @@ export default class QuestionEditView extends React.PureComponent<QuestionEditVi
       return false;
     }
 
-
     onAnswerChange(index: number, answer: Answer) {
       const question = this.props.question;
       const answers = (question.answers || []).map((value, i) => i != index ? value : answer);
@@ -83,6 +87,14 @@ export default class QuestionEditView extends React.PureComponent<QuestionEditVi
       this.props.onQuestionChange(update);
     }
 
+    onQuestionExplanationChange (e: any) {
+      const value = e.target.value;
+      const question = this.props.question;
+      const update = { ...question, explanation: new Text({ value: value }) };
+
+      this.props.onQuestionChange(update);
+    }
+
     addAnswer() {
       const question = this.props.question;
       const update = { ...question, answers: (question.answers || []).concat(new Answer({ id: uuid(), isCorrect: false })) };
@@ -111,6 +123,11 @@ export default class QuestionEditView extends React.PureComponent<QuestionEditVi
               control={ { componentClass: "textarea", rows: 3, value: this.props.question.text ? this.props.question.text.value : "", onChange: this.onQuestionTextChange } }
               label="Question"
             />
+            <FieldGroup
+              id={ this.props.question.id + "_qExplanation" }
+              control={ { componentClass: "textarea", rows: 3, value: this.props.question.explanation ? this.props.question.explanation.value : "", onChange: this.onQuestionExplanationChange } }
+              label="Explanation"
+            />
             <Button bsStyle="success" onClick={ this.addAnswer }>Add Answer</Button>
             <ButtonGroup vertical block type="checkbox">
               { this.props.question.answers && (this.props.question.answers.map((a, index) => {

src/components/QuestionView.tsx

@@ -4,6 +4,7 @@ import Question from "../model/Question";
 import Answer from "../model/Answer";
 import AnswerView from "./AnswerView";
 import IAssociativeArray from "../domain/IAssociativeArray";
+import * as ReactMarkdown from "react-markdown";
 
 export interface QuestionViewProps {
     question: Question;
@@ -33,12 +34,24 @@ export default class QuestionView extends React.PureComponent<QuestionViewProps,
         const content =
             <div style={ { whiteSpace: "pre-wrap" } }>
                 <h3>{ this.props.question.key }</h3>
-                <p>{ this.props.question.text.value }</p>
+                <p>{ this.props.question.text ? this.props.question.text.value : "" }</p>
                 <ButtonGroup vertical block>
                   { this.props.question.answers ? (this.props.question.answers.map(a => (
                     <AnswerView onAnswerChange={ this.props.onAnswerChange } disabled={ this.props.answersDisabled } checked={ this.props.checkedAnswers ? (this.props.checkedAnswers[a.id] || false) : false } answer={ a } key={ a.id } highlightIfCorrect={ this.props.highlightCorrectAnswers } highlightIfIncorrect={ this.props.highlightIncorrectAnswers } />
                   ))) : <span>No answers found</span> }
                 </ButtonGroup>
+                { this.props.answersDisabled && this.props.question.explanation && this.props.question.explanation.value &&
+                    (<div>
+                        <h4>Explanation</h4>
+                        <ReactMarkdown
+                          key={ this.props.question.id }
+                          className="result"
+                          source={ this.props.question.explanation ? this.props.question.explanation.value : "" }
+                          skipHtml={ true }
+                          escapeHtml={ true }
+                        />
+                    </div>)
+                }
             </div>;
 
         return (

src/controllers/CourseController.ts

@@ -67,7 +67,7 @@ const retrieveCourse = (courseName: string) => {
       for (let i = 0; dbQuestions && i < dbQuestions.length; i++) {
         const dbQuestion = dbQuestions[i];
 
-        const question = new Question({ id: dbQuestion.id, key: dbQuestion.key, text: new Text({ value: dbQuestion.text }), position: dbQuestion.position, answers: [] });
+        const question = new Question({ id: dbQuestion.id, key: dbQuestion.key, text: new Text({ value: dbQuestion.text }), explanation: new Text({ value: dbQuestion.explanation }), position: dbQuestion.position, answers: [] });
 
         questions.push(
           pool.query("SELECT * from open_certification_trainer.answer AS answer WHERE answer.question_id = $1 ORDER BY answer.key", [question.id])
@@ -139,9 +139,9 @@ export const postUpload = (req: Request, res: Response) => {
 
     // Upsert question one by one
     query.push(
-      `INSERT INTO open_certification_trainer.question (id, key, text, certification_id, position) VALUES ('${ question.id }', '${ escapeSpecialCharacters(question.key) }', '${ question.text ? escapeSpecialCharacters(question.text.value) : "" }', '${ data.id }', '${ question.position }')
+      `INSERT INTO open_certification_trainer.question (id, key, text, explanation, certification_id, position) VALUES ('${ question.id }', '${ escapeSpecialCharacters(question.key) }', '${ question.text ? escapeSpecialCharacters(question.text.value) : "" }', '${ question.explanation ? escapeSpecialCharacters(question.explanation.value) : "" }', '${ data.id }', '${ question.position }')
        ON CONFLICT(id) DO
-           UPDATE SET (key, text, certification_id, position) = ('${ escapeSpecialCharacters(question.key) }', '${ question.text ? escapeSpecialCharacters(question.text.value) : "" }', '${ data.id }', '${ question.position }')
+           UPDATE SET (key, text, explanation, certification_id, position) = ('${ escapeSpecialCharacters(question.key) }', '${ question.text ? escapeSpecialCharacters(question.text.value) : "" }', '${ question.explanation ? escapeSpecialCharacters(question.explanation.value) : "" }', '${ data.id }', '${ question.position }')
          WHERE open_certification_trainer.question.id = '${ question.id }';`
      );
 

src/model/Question.ts

@@ -4,6 +4,7 @@ import Text from "./Text";
 export interface QuestionProps {
   key?: string;
   text?: Text;
+  explanation?: Text;
   position?: number;
   answers?: Array<Answer>;
   id: string;
@@ -12,13 +13,15 @@ export interface QuestionProps {
 export default class Question {
     key: string;
     text: Text;
+    explanation: Text;
     position: number;
     answers: Array<Answer>;
     id: string;
 
     constructor(props: QuestionProps) {
       this.key = props.key;
       this.text = props.text;
+      this.explanation = props.explanation;
       this.position = props.position;
       this.answers = props.answers;
       this.id = props.id;