Add feedback changes. Add levelEducation variable

src/App.css

@@ -140,7 +140,7 @@ form button {
 #vom-admin-canvas {
   width: 100%;
   background-color: #F2F2F2;
-  background-image: url('merseyside-nobg-4_5-LABELED-low.png');
+  background-image: url('merseyside-nobg-4_5-LIGHT.png');
   background-position: top left;
   background-size: contain;
   background-repeat: no-repeat;

src/App.tsx

@@ -34,7 +34,7 @@ const Introduction: React.FunctionComponent<SectionComponentProps> = ({ changePa
         identity.
       </p>
       <p>
-        We wish to invite all Merseyside residents of varying ages, gender, class and ethnicity to partake in
+        We wish to invite all Merseyside residents of varying ages (16+), gender, class and ethnicity to partake in
         our study and help us to draw a truly representative map of the linguistic landscape of Merseyside,
         as experienced by you, the Voices of Merseyside.
       </p>
@@ -72,7 +72,7 @@ const TermsAndConditions: React.FunctionComponent<SectionComponentProps> = ({ ch
         </div>
         <FormGroup className="mb-4" check>
           <Input type="checkbox" id="vom-terms-check" checked={agreement} onChange={ e => setAgreement(e.target.checked)}/>
-          <Label for="vom-terms-check" check>I give my permission to participate in this research.</Label>
+          <Label for="vom-terms-check" check>I give my permission to participate in this research/project.</Label>
         </FormGroup>
         <Button type="button" disabled={!agreement} color={agreement ? 'info' : 'secondary'}  onClick={ () => changePage() }>Next</Button>
       </Form>
@@ -100,7 +100,7 @@ type AnswersData = {
 
 const PAGES = [0, 1, 2, 3, 4];
 const App = () => {
-  const [ currentPage, setCurrentPage ] = useState(0);
+  const [ currentPage, setCurrentPage ] = useState(2);
   const [ exit, setExit ] = useState(false);
   const [ answers, saveAnswers ] = useState<AnswersData>({
     personalInformation: {
@@ -109,6 +109,7 @@ const App = () => {
       genderCustom: '',
       ethnicity: '',
       ethnicityCustom: '',
+      levelEducation: [],
       birthPlace: '',
       currentPlace: '',
       nonNative: '',

src/DrawCanvas.tsx

@@ -695,8 +695,8 @@ export const DrawCanvas: React.FunctionComponent<{
         </ModalHeader>
         <ModalBody>
           <ol>
-            <li>Please draw a shape around an area where you think a certain accent or dialect is spoken in Merseyside.</li>
-            <li>Please name the accent, give an example of how it sounds, write down any associations (ideas, judgements, opinions etc.) that come to mind when you encounter this accent/a speaker with this accent.</li>
+            <li>Please draw a shape around an area where you think a certain accent or dialect is spoken in Merseyside. <b>Please be as precise as possible.</b></li>
+            <li>Please name the accent, give an example of how it sounds, write down any associations (ideas, judgements, opinions etc.) that <b>immediately</b> come to mind when you encounter this accent/a speaker with this accent.</li>
             <li>You are free to edit your map using the edit function.</li>
             <li>Repeat stages 1 and 2 until you have finished your map. Once you have finished, click ‘finished’. It will not be possible to make changes after your map has been submitted.</li>
           </ol>

src/PersonalInformation.tsx

@@ -12,6 +12,7 @@ import {
   FormFeedback,
   Fade
 } from 'reactstrap';
+import { isEmpty, without, concat } from 'ramda';
 
 export type FormData = {
   age: string,
@@ -19,6 +20,7 @@ export type FormData = {
   genderCustom: string,
   ethnicity: string,
   ethnicityCustom: string,
+  levelEducation: string[],
   birthPlace: string,
   currentPlace: string,
   nonNative: string
@@ -44,12 +46,15 @@ const notEmptyCustomResponse = (customValue: string, fixedResponse: string) => {
   return true;
 };
 
+const atLeastOne = (selection: string[]) => !isEmpty(selection);
+
 const validateData = (values: FormData): Validations => ({
   age: notEmpty(values.age),
   gender: notEmpty(values.gender),
   genderCustom: notEmptyCustomResponse(values.genderCustom, values.gender),
   ethnicity: notEmpty(values.ethnicity),
   ethnicityCustom: notEmptyCustomResponse(values.ethnicityCustom, values.ethnicity),
+  levelEducation: atLeastOne(values.levelEducation),
   birthPlace: notEmpty(values.birthPlace),
   currentPlace: notEmpty(values.currentPlace),
   nonNative: true
@@ -61,6 +66,7 @@ const _initialValidation: Validations = {
   genderCustom: false,
   ethnicity: false,
   ethnicityCustom: false,
+  levelEducation: false,
   birthPlace: false,
   currentPlace: false,
   nonNative: false
@@ -77,6 +83,7 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
     genderCustom: '',
     ethnicity: '',
     ethnicityCustom: '',
+    levelEducation: [],
     birthPlace: '',
     currentPlace: '',
     nonNative: '',
@@ -97,6 +104,17 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
     }
   }
 
+  const handleLevelEducation = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValues = {
+      ...values,
+      levelEducation: e.target.checked ? concat([e.target.value], values.levelEducation) : without([e.target.value], values.levelEducation)
+    };
+    setValue(newValues);
+    if (submitted) {
+      saveValidation(validateData(newValues))
+    }
+  }
+
   const handleSelect = (value: keyof FormData ) => (e: React.ChangeEvent<HTMLSelectElement|HTMLInputElement>) => {
     const newValues = {
       ...values,
@@ -142,7 +160,7 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
           { ...setInputValidation('age') }
           >
             <option value="" disabled>Please choose</option>
-            <option value="1">11 - 17</option>
+            <option value="1">16 - 17</option>
             <option value="2">18 - 25</option>
             <option value="3">26 - 45</option>
             <option value="4">46 - 65</option>
@@ -175,7 +193,7 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
           <Label for="ethnicity">
             Ethnicity
             <FormText color="muted">
-              The following options are taken from the 2011 UK Census. You can also define yours selecting the 'None of the above' option.
+              These ethnic groups are taken from the 2011 UK Census. If you feel that these groups do not effectively represent you, please click ‘None of the above’ and add your ethnicity using your own words.
             </FormText>
           </Label>
           <Input type="select" id="ethnicity" value={values.ethnicity} onChange={handleSelect('ethnicity')} { ...setInputValidation('ethnicity') } required>
@@ -216,6 +234,29 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
           }
         </FormGroup>
 
+        <FormGroup>
+          <Label for="level-education">Level of education</Label>
+          <FormGroup>
+            <FormGroup check>
+              <Input id="ed-high-school" type="checkbox" value="1" onChange={handleLevelEducation} { ...setInputValidation('levelEducation') }/>
+              <Label for="ed-high-school" check> High school or lower </Label>
+            </FormGroup>
+            <FormGroup check>
+              <Input type="checkbox" id="ed-bachelors" value="2" onChange={handleLevelEducation} { ...setInputValidation('levelEducation') }/>
+              <Label for="ed-bachelors" check> Bachelors </Label>
+            </FormGroup>
+            <FormGroup check>
+              <Input type="checkbox" id="ed-masters" value="3" onChange={handleLevelEducation} { ...setInputValidation('levelEducation') }/>
+              <Label for="ed-masters" check> Masters </Label>
+            </FormGroup>
+            <FormGroup check>
+              <Input type="checkbox" id="ed-doctorate" value="4" onChange={handleLevelEducation} { ...setInputValidation('levelEducation') }/>
+              <Label for="ed-doctorate" check> Doctorate </Label>
+              <FormFeedback>Please, check at least one option</FormFeedback>
+            </FormGroup>
+          </FormGroup>
+        </FormGroup>
+
         <FormGroup>
           <Label for="place-birth">Place of birth (Town/City and Country)</Label>
           <Input id="place-birth" type="text" required value={values.birthPlace} onChange={handleSelect('birthPlace')} { ...setInputValidation('birthPlace') }/>