Merge pull request #248 from HarvardOpenData/kh-predictions-continuous

Integrate "continuous" range for intervals

Author: HarvardODP

web/src/components/predictions/predictions-game.js

@@ -57,7 +57,7 @@ const PredictionsGame = ({ user }) => {
   }
 
   // render appropriate component for each question
-  function renderQuestion(question, date_expired, answer, disabled) {
+  function renderQuestion(question, date_expired, answer, disabled, step=1) {
     const qid = question.key;
     const prediction = snapshot.child(qid).val();
     const choices = question.child("choices").val();
@@ -110,6 +110,7 @@ const PredictionsGame = ({ user }) => {
             answer={answer}
             lower={choices[0]}
             upper={choices[1]}
+            step={step}
             date_expired={date_expired}
             prediction={prediction}
             explanation={question.child("explanation").val()}
@@ -134,12 +135,14 @@ const PredictionsGame = ({ user }) => {
   questions.forEach((question) => {
     const date_expired = question.child("date_expired").val();
     let answer = question.child("answer").val();
+    let step = question.child("step").val() === 'continuous' ? 0.1 : 1;
+
     if (answer !== null) {
       answer = parseInt(answer);
     }
 
     if (new Date(date_expired).getTime() > new Date().getTime()) {
-      liveQuestions.push(renderQuestion(question, date_expired, answer, false));
+      liveQuestions.push(renderQuestion(question, date_expired, answer, false, step));
     } else if (
       new Date(date_expired).getTime() < new Date().getTime() &&
       answer == null

web/src/components/predictions/questions/interval-choice.js

@@ -42,7 +42,7 @@ function IntervalChoice(props) {
 
   const validateLower = (e) => {
     const bound = Math.min(values[1], upper);
-    let value = parseInt(e.target.value);
+    let value = parseFloat(e.target.value);
     if (value < lower || e.target.value === "") {
       value = lower;
     } else if (value > bound) {
@@ -54,7 +54,7 @@ function IntervalChoice(props) {
 
   const validateUpper = (e) => {
     const bound = Math.max(values[0], lower);
-    let value = parseInt(e.target.value);
+    let value = parseFloat(e.target.value);
     if (value > upper || e.target.value === "") {
       value = upper;
     } else if (value < bound) {
@@ -95,6 +95,13 @@ function IntervalChoice(props) {
     }
   }
 
+  function update(value, values, step) {
+    if (step === 1) {
+      setValues([value && parseInt(value), values[1]])
+    }
+    setValues([value && parseFloat(value), values[1]]);
+  }
+
   return (
     <form onSubmit={(event) => afterSubmission(event)}>
       <Grid mt={1} mx={3} gap={0} columns={[2, "3fr 5fr"]}>
@@ -152,9 +159,7 @@ function IntervalChoice(props) {
             max={upper}
             value={values[0]}
             disabled={props.disabled}
-            onChange={(e) =>
-              setValues([e.target.value && parseInt(e.target.value), values[1]])
-            }
+            onChange={(e) => update(e.target.value, values, props.step)}
             onBlur={validateLower}
             onKeyDown={(e) => {
               if (e.key === "Enter") e.target.blur();
@@ -172,9 +177,7 @@ function IntervalChoice(props) {
             max={upper}
             value={values[1]}
             disabled={props.disabled}
-            onChange={(e) =>
-              setValues([values[0], e.target.value && parseInt(e.target.value)])
-            }
+            onChange={(e) => update(e.target.value, values, props.step)}
             onBlur={validateUpper}
             onKeyDown={(e) => {
               if (e.key === "Enter") e.target.blur();