Add different critical questions for expert and popular arguments

client/src/App.css

@@ -25,14 +25,14 @@
   cursor: pointer;
 }
 
-.ArgumentPreview .scheme-name {
+.scheme-name {
   border-bottom: 1px solid #ccc;
   padding: 0.25em 0.5em;
   font-weight: bold;
   background-color: #eee;
 }
 
-.ArgumentPreview .value-name {
+.value-name {
   padding: 0.5em;
 }
 
@@ -41,13 +41,6 @@
   border: 1px solid #ccc;
 }
 
-.ArgumentDetails .scheme-name {
-  border-bottom: 1px solid #ccc;
-  padding: 0.25em 0.5em;
-  font-weight: bold;
-  background-color: #eee;
-}
-
-.ArgumentDetails .value-name {
-  padding: 0.5em;
+.cq-button {
+  margin-left: 0.5em
 }

client/src/components/Argument.js

@@ -4,7 +4,6 @@ import axios from 'axios'
 import ActionDetailScheme from './argumentDetailSchemes/ActionDetailScheme'
 import ExpertDetailScheme from './argumentDetailSchemes/ExpertDetailScheme'
 import PopularDetailScheme from './argumentDetailSchemes/PopularDetailScheme'
-import CriticalQuestion from './CriticalQuestion'
 
 class Argument extends React.Component {
   state = {
@@ -44,7 +43,7 @@ class Argument extends React.Component {
     return (
       <div className="ArgumentDetails">
         <div className="scheme-name">
-          {argumentNotRoot ? `${isArgumentPositive} : ` : null }{schemeName} 
+          {argumentNotRoot ? `${isArgumentPositive} : ` : null }{schemeName}
         </div>
         <div className="value-name">
           {argumentNotRoot ?
@@ -55,17 +54,10 @@ class Argument extends React.Component {
             )
             : null}
           {{
-              action: <ActionDetailScheme {...this.state.argument}/>,
-              expert: <ExpertDetailScheme {...this.state.argument}/>,
-              popular: <PopularDetailScheme {...this.state.argument}/>
+              action: <ActionDetailScheme showCriticalQuestions={true} {...this.state.argument}/>,
+              expert: <ExpertDetailScheme showCriticalQuestions={true} {...this.state.argument}/>,
+              popular: <PopularDetailScheme showCriticalQuestions={true} {...this.state.argument}/>
             }[this.state.argument.scheme]}
-          <hr/>
-          <h4>Critical Questions</h4>
-          <ul>
-            <li><CriticalQuestion question={`Is the current circumstance '${this.state.argument.circumstance}' true?`} argumentId={this.state.argument._id}/></li>
-            <li><CriticalQuestion question={`Does the action '${this.state.argument.action}' achieve the goal of '${this.state.argument.goal}'?`} argumentId={this.state.argument._id}/></li>
-            <li><CriticalQuestion question={`Is there an alternative action that achieves the goal '${this.state.argument.goal}'?`} argumentId={this.state.argument._id}/></li>
-          </ul>
         </div>
       </div>
     );

client/src/components/CriticalQuestion.js

@@ -27,8 +27,8 @@ class CriticalQuestion extends React.Component {
       <div>
         <p style={{display: 'inline'}}>{this.props.question}</p>
         <span>
-          <Button id="yesButton" onClick={this.agreeArgumentClick}>Y</Button>
-          <Button id="noButton" onClick={this.disagreeArgumentClick}>N</Button>
+          <Button className="cq-button" id="yesButton" onClick={this.agreeArgumentClick}>Y</Button>
+          <Button className="cq-button" id="noButton" onClick={this.disagreeArgumentClick}>N</Button>
         </span>
       </div>
     )

client/src/components/argumentDetailSchemes/ActionDetailScheme.js

@@ -1,13 +1,29 @@
 import React from 'react'
 
+import CriticalQuestion from '../CriticalQuestion'
+
 const ActionDetailScheme = (props) => {
   return (
-    <div className="value-name">
-      <div>In current circumstance R: {props.circumstance}</div>
-      <div>We should perform action A: {props.action}</div>
-      <div>Which will result in a new circumstance S: {props.newCircumstance}</div>
-      <div>Which will achieve goal G: {props.goal}</div>
-      <div>That will promote value V: {props.value}</div>
+    <div>
+      <div className="value-name">
+        <div>In current circumstance R: {props.circumstance}</div>
+        <div>We should perform action A: {props.action}</div>
+        <div>Which will result in a new circumstance S: {props.newCircumstance}</div>
+        <div>Which will achieve goal G: {props.goal}</div>
+        <div>That will promote value V: {props.value}</div>
+      </div>
+      {props.showCriticalQuestions ?
+        <div>
+          <hr/>
+          <h4>Critical Questions</h4>
+          <ul>
+            <li><CriticalQuestion question={`Is the current circumstance '${props.circumstance}' true?`} argumentId={props._id}/></li>
+            <li><CriticalQuestion question={`Does the action '${props.action}' achieve the goal of '${props.goal}'?`} argumentId={props._id}/></li>
+            <li><CriticalQuestion question={`Is there an alternative action that achieves the goal '${props.goal}'?`} argumentId={props._id}/></li>
+          </ul>
+        </div>
+        : null
+      }
     </div>
   )
 }

client/src/components/argumentDetailSchemes/ExpertDetailScheme.js

@@ -1,11 +1,27 @@
 import React from 'react'
 
+import CriticalQuestion from '../CriticalQuestion'
+
 const ExpertDetailScheme = (props) => {
   return (
-    <div className="value-name">
-      <div>There is a source E: {props.source}</div>
-      <div>Who is an expert in subject domain D: {props.domain}</div>
-      <div>The source makes the assestion A that: {props.assertion}</div>
+    <div>
+      <div className="value-name">
+        <div>There is a source E: {props.source}</div>
+        <div>Who is an expert in subject domain D: {props.domain}</div>
+        <div>The source makes the assestion A that: {props.assertion}</div>
+      </div>
+      {props.showCriticalQuestions ?
+        <div>
+          <hr/>
+          <h4>Critical Questions</h4>
+          <ul>
+            <li><CriticalQuestion question={`How credible is '${props.source}' an expert?`} argumentId={props._id}/></li>
+            <li><CriticalQuestion question={`Is '${props.source}' an expert in the field that the assertion '${props.assertion}' is in?`} argumentId={props._id}/></li>
+            <li><CriticalQuestion question={`Is the assertion '${props.assertion}' consistent with what other experts assert?`} argumentId={props._id}/></li>
+          </ul>
+        </div>
+        : null
+      }
     </div>
   )
 }

client/src/components/argumentDetailSchemes/PopularDetailScheme.js

@@ -1,9 +1,24 @@
 import React from 'react'
 
+import CriticalQuestion from '../CriticalQuestion'
+
 const PopularDetailScheme = (props) => {
   return (
-    <div className="value-name">
-      <div>Proposition A is generally accepted as being true, that gives a reason in favour of A: {props.proposition}</div>
+    <div>
+      <div className="value-name">
+        <div>Proposition A is generally accepted as being true, that gives a reason in favour of A: {props.proposition}</div>
+      </div>
+      {props.showCriticalQuestions ?
+        <div>
+          <hr/>
+          <h4>Critical Questions</h4>
+          <ul>
+            <li><CriticalQuestion question={`What evidence do we have for believing that '${props.proposition}' is generally accepted?`} argumentId={props._id}/></li>
+            <li><CriticalQuestion question={`Are there good reasons for doubting the accuracy of '${props.proposition}'?`} argumentId={props._id}/></li>
+          </ul>
+        </div>
+        : null
+      }
     </div>
   )
 }