The meta survey - A survey about surveys by jonsjak · Pull Request #453 · Technigo/project-survey

jonsjak · 2023-03-20T09:45:40Z

No description provided.

Vera-Sjunnesson

This project was a lot of fun! Great concept criticizing surveys in a survey. The questions were humorous about the disadvantages of surveys. Loved the satire.

The site functions as it should. A variety of html input types are used. But above all: the code, i.e. the components, have a super clear, consistent structure and the code is easy to follow/understand. It is responsive and accessible, except for some minor issues with the alt text (which I made comments about). When I run the site through an accessibility tool it alerted on the main headings being too low contrast. See my comments for other suggestions of things which could be improved. Enjoyed reviewing it!
Best,
Vera

Vera-Sjunnesson · 2023-03-21T13:08:58Z

code/package-lock.json

-    "node_modules/babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.",
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "peerDependencies": {
-        "eslint": ">= 4.12.1"
-      }
-    },
-    "node_modules/babel-eslint/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "engines": {
-        "node": ">=4"
-      }
-    },


Hmm, what is babel eslint? Why did you remove it?

Vera-Sjunnesson · 2023-03-21T13:16:23Z

code/src/App.js

+import React, { useState } from 'react';
+import { Question1 } from 'components/Question1';
+import { Question2 } from 'components/Question2';
+import { Question3 } from 'components/Question3';
+import { Question4 } from 'components/Question4';
+import { Welcome } from 'components/Welcome';
+import { Summary } from 'components/Summary';

 export const App = () => {
+  const [counter, setCounter] = useState(0);
+  const [answer1, setAnswer1] = useState('');
+  const [answer2, setAnswer2] = useState('');
+  const [answer3, setAnswer3] = useState(0);
+  const [answer4, setAnswer4] = useState('');


Very clear and consistent structure with questions and answers

Vera-Sjunnesson · 2023-03-21T13:19:09Z

code/src/App.js

+  const nextHandler = () => {
+    setCounter(counter + 1);
+  };
+
+  const backHandler = () => {
+    setCounter(counter - 1);
+  };
+  const restartSurvey = () => {
+    setCounter(0);
+    setAnswer1('');
+    setAnswer2('');
+    setAnswer3(0);
+    setAnswer4('');
+  };


Good to have different buttons for the user to freely move back and forth on the site

Vera-Sjunnesson · 2023-03-21T13:22:54Z

code/src/App.js

  return (
-    <div>
-      Find me in src/app.js!
+    <div className="main-container">
+      {counter === 0 && (
+        <Welcome nextHandler={nextHandler} />
+      )}
+      {counter === 1 && (
+        <Question1 answer1={answer1} setAnswer1={setAnswer1} />
+      )}
+      {counter === 2 && (
+        <Question2 answer2={answer2} setAnswer2={setAnswer2} />
+      )}
+      {counter === 3 && (
+        <Question3 answer3={answer3} setAnswer3={setAnswer3} />
+      )}
+      {counter === 4 && (
+        <Question4 answer4={answer4} setAnswer4={setAnswer4} />
+      )}
+      {counter > 4 && (
+        <>
+          <Summary
+            answer1={answer1}
+            answer2={answer2}
+            answer3={answer3}
+            answer4={answer4} />
+          <button className="restart-button" type="button" onClick={restartSurvey}>
+          Restart survey
+          </button>
+        </>
+      )}
+      <div className="button-container">
+        {counter > 0 && (
+          <button type="button" onClick={backHandler}>
+          Back
+          </button>
+        )}
+        {counter > 0 && counter < 5 && (
+          <>
+            <p>Question: {counter}/4</p>
+            <button type="button" onClick={nextHandler}>
+              Next
+            </button>
+          </>
+        )}
+      </div>
    </div>
  );
-}
+};


Wow! So concise! Neat.

Vera-Sjunnesson · 2023-03-21T13:27:11Z

code/src/components/Question1.js

+  return (
+    <div>
+      <h3>Question 1</h3>
+      <p>People tend to grow tired of surveys as they are often time-consuming and repetitive.</p>
+      <p>To what degree do you agree with the following statement?</p>
+      <p className="question-text">“I often skip surveys because they are too boring to fill out”</p>
+      <form className="radio-form">
+        <label htmlFor="strongly-disagree">
+          <input type="radio" name="q1-answer1" id="strongly-disagree" value="strongly-disagree" checked={answer1 === 'strongly-disagree'} onChange={q1Handler} />
+          Strongly disagree
+        </label>
+        <label htmlFor="somewhat-disagree">
+          <input type="radio" name="q1-answer1" id="somewhat-disagree" value="somewhat-disagree" checked={answer1 === 'somewhat-disagree'} onChange={q1Handler} />
+          Somewhat disagree
+        </label>
+        <label htmlFor="neutral">
+          <input type="radio" name="q1-answer1" id="neutral" value="neutral" checked={answer1 === 'neutral'} onChange={q1Handler} />
+          Neutral
+        </label>
+        <label htmlFor="somewhat-agree">
+          <input type="radio" name="q1-answer1" id="somewhat-agree" value="somewhat-agree" checked={answer1 === 'somewhat-agree'} onChange={q1Handler} />
+          Somewhat agree
+        </label>
+        <label htmlFor="strongly-agree">
+          <input type="radio" name="q1-answer1" id="strongly-agree" value="strongly-agree" checked={answer1 === 'strongly-agree'} onChange={q1Handler} />
+          Strongly agree
+        </label>
+      </form>
+    </div>
+  );
+}


Mapping the radio button values from an array would be another way to approach this.

Vera-Sjunnesson · 2023-03-21T14:16:30Z

code/src/index.css

+}
+
+.summary-list{
+  list-style-image: url("../images/checklist-icon.svg");


These don't have alt texts either. Not that I now how to do it though... The wave accessibility tool alerted on this and marked your background-image/list-style-images as <noscript> elements...

Vera-Sjunnesson · 2023-03-21T14:23:11Z

code/src/index.css

+.select-form label{
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.honesty-form{
+  background-color: rgb(123 158 93);
+    background-image: linear-gradient(to right, rgb(233 245 232) , rgb(148 217 87));
+    text-align: center;
+    font-size: 22px;
+    padding: 12px 36px;
+    border-radius: 24px;


Maybe pay attention to indentation here?

Vera-Sjunnesson · 2023-03-21T14:23:55Z

code/src/index.js

-import { createRoot } from 'react-dom/client'
-import './index.css'
-import { App } from './App'
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './index.css';

-const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(<App />);
+const root = createRoot(document.getElementById('root'));
+root.render(<App />)


Why was the index.js changed?

Vera-Sjunnesson · 2023-03-21T14:24:30Z

netlify.toml

  base = "code/"
  publish = "build/"
-  command = "npm run build"
+  command = "CI= npm run build"


Why was this changed?

Vera-Sjunnesson · 2023-03-21T14:31:14Z

code/src/index.css

+.radio-form{
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 31px;
+    align-items: flex-start;
+    background-color: rgb(123 158 93);
+    background-image: linear-gradient(to right, rgb(233 245 232) , rgb(148 217 87));
+    border-radius: 36px;
+    padding: 10px;
+    margin: 0 5px;
+}


This radio form was the only thing which didn't work as well on a mobile screen. Maybe put a gap between the radio buttons or make the text shorter/smaller?

jonsjak and others added 3 commits March 20, 2023 10:06

copied all files

afbff2f

Update README.md

b5931c2

mod to netlify.toml

b62061a

Vera-Sjunnesson approved these changes Mar 21, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The meta survey - A survey about surveys#453

The meta survey - A survey about surveys#453
jonsjak wants to merge 3 commits intoTechnigo:masterfrom
jonsjak:master

jonsjak commented Mar 20, 2023

Uh oh!

Vera-Sjunnesson left a comment

Uh oh!

Vera-Sjunnesson Mar 21, 2023

Uh oh!

Vera-Sjunnesson Mar 21, 2023

Uh oh!

Vera-Sjunnesson Mar 21, 2023

Uh oh!

Vera-Sjunnesson Mar 21, 2023

Uh oh!

Vera-Sjunnesson Mar 21, 2023

Uh oh!

Vera-Sjunnesson Mar 21, 2023

Uh oh!

Vera-Sjunnesson Mar 21, 2023

Uh oh!

Vera-Sjunnesson Mar 21, 2023

Uh oh!

Vera-Sjunnesson Mar 21, 2023

Uh oh!

Vera-Sjunnesson Mar 21, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jonsjak commented Mar 20, 2023

Uh oh!

Vera-Sjunnesson left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants