├── files.js ├── client ├── components │ ├── Activities.jsx │ ├── ErrorPage.jsx │ ├── QuestionDisplay.jsx │ ├── AboutWindow.jsx │ ├── AssessmentWindow.jsx │ ├── AssessmentPage.jsx │ └── ResultsPage.jsx ├── index.js ├── questions.js ├── App.jsx └── styles │ └── styles.css ├── index.html ├── .eslintrc ├── webpack.config.js ├── LICENSE ├── README.md ├── server ├── server.js └── quizController.js └── package.json /files.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/components/Activities.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Activities(props) { 4 | return ( 5 |
6 |

{props.behavior}

7 |
8 | ); 9 | } 10 | 11 | export default Activities; 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Covid Assessment Quiz 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": ["problems", "prettier"], 4 | "env": { "node": true, "browser": true, "jest": true }, 5 | "parserOptions": { "ecmaVersion": 2020, "sourceType": "module" }, 6 | "rules": { 7 | "no-console": "off" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /client/components/ErrorPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function ErrorPage() { 4 | return ( 5 |
6 |

Error: Page not found!

7 |

nothing to see here!

8 |
9 | ); 10 | } 11 | 12 | export default ErrorPage; 13 | -------------------------------------------------------------------------------- /client/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { BrowserRouter } from 'react-router-dom'; 4 | 5 | import App from './App.jsx'; 6 | 7 | render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | -------------------------------------------------------------------------------- /client/components/QuestionDisplay.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function QuestionDisplay(props) { 4 | return ( 5 |
6 | { 11 | // console.log('e.target.checked is', e.target.checked); 12 | if (e.target.checked) { 13 | props.add(props.keyword); 14 | } else { 15 | props.remove(props.keyword); 16 | } 17 | }} 18 | /> 19 | 20 |
21 | ); 22 | } 23 | 24 | export default QuestionDisplay; 25 | -------------------------------------------------------------------------------- /client/components/AboutWindow.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function AboutWindow(props) { 4 | return ( 5 |
6 |

About the Quiz

7 |

8 | This tool will help you assess your activities and determine your risk 9 | of contracting COVID-19. It will also offer guidance on what exactly 10 | your riskiest activities are. 11 |

This information is based on the Texas 12 | Medical Association guidelines and has been ranked by physicians from 13 | the TMA COVID-19 task force and the TMA committee on infectious 14 | diseases. 15 |

16 |

17 |
18 | ); 19 | } 20 | 21 | export default AboutWindow; 22 | -------------------------------------------------------------------------------- /client/components/AssessmentWindow.jsx: -------------------------------------------------------------------------------- 1 | import React, { Redirect } from 'react'; 2 | import QuestionDisplay from './QuestionDisplay.jsx'; 3 | import Questions from '../questions'; 4 | 5 | function AssessmentWindow(props) { 6 | let questions = Questions; 7 | 8 | // question display generator 9 | questions = questions.map((question, index) => { 10 | return ( 11 | 18 | ); 19 | }); 20 | 21 | //console.log(questions); 22 | 23 | return ( 24 |
25 |

Take The Assessment

26 |
27 | {questions} 28 |
29 |
30 | ); 31 | } 32 | 33 | export default AssessmentWindow; 34 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: process.env.NODE_ENV, 3 | devtool: 'source-map', 4 | entry: './client/index.js', 5 | output: { 6 | path: `${__dirname}/build`, 7 | filename: 'bundle.js', 8 | }, 9 | 10 | devServer: { 11 | historyApiFallback: true, 12 | proxy: { 13 | '/': 'http://localhost:3000', 14 | }, 15 | publicPath: '/build', 16 | }, 17 | 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.jsx?/, 22 | exclude: /(node_modules)/, 23 | use: { 24 | loader: 'babel-loader', 25 | options: { 26 | presets: ['@babel/preset-env', '@babel/preset-react'], 27 | }, 28 | }, 29 | }, 30 | { 31 | test: /\.css$/i, 32 | use: ['style-loader', 'css-loader', 'sass-loader'], 33 | }, 34 | ], 35 | }, 36 | 37 | resolve: { 38 | extensions: ['*', '.css', '.scss', '.js', '.jsx'], 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /client/components/AssessmentPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Redirect, NavLink } from 'react-router-dom'; 3 | import AssessmentWindow from './AssessmentWindow.jsx'; 4 | import AboutWindow from './AboutWindow.jsx'; 5 | import styles from '../styles/styles.css'; 6 | 7 | function AssessmentPage(props) { 8 | console.log(props); 9 | return ( 10 |
11 |
12 |
13 | 14 |
15 |
16 | 17 | {/* // return ; */} 18 | 19 | 20 | 27 | 28 |
29 |
30 |
31 | ); 32 | } 33 | 34 | export default AssessmentPage; 35 | -------------------------------------------------------------------------------- /client/components/ResultsPage.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import Activities from './Activities.jsx'; 3 | import styles from '../styles/styles.css'; 4 | import Questions from '../questions'; 5 | 6 | function ResultsPage(props) { 7 | let questions = Questions; 8 | 9 | const lookupTable = questions.reduce((table, question) => { 10 | table[question.keyword] = question.text; 11 | return table; 12 | }, {}); 13 | 14 | const activities = []; 15 | for (let i = 0; i < props.riskyActs.length; i += 1) { 16 | const text = lookupTable[props.riskyActs[i]]; 17 | activities.push(); 18 | } 19 | 20 | return ( 21 |
22 |
23 |

Your Results:

24 |
Risk level based on behaviors: {props.riskLevel}
25 |
The riskiest behaviors you engage in include:
26 | {activities} 27 |
28 |
29 | ); 30 | } 31 | 32 | export default ResultsPage; 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 ScratchFishCS 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # covid-risk-assessment 2 | 3 | ## 1. What is the problem you’re solving? 4 | 5 | Currently, there is no way for us to really measure and assess our risk of getting COVID-19 with our day to day activity. 6 | ## 2. What is the solution? 7 | We want a way to provide a more accurate assessment of our risk of COVID exposure. We will build a web app where a user completes a questionnaire that will calculate their risk based on the activities they have engaged in. 8 | 9 | ## 3. What is the MVP scope? (core features you must get working) 10 | - Questionnaire Form 11 | - Output 12 | 13 | ## 4. What are the tough technical challenges involved with solving this problem? 14 | It will be difficult to handle the dynamic data collection as we are essentially building our own algorithm to determine which activities involve the highest risk. 15 | 16 | ## 5. What are the stretch goals? 17 | - Send output to personal gmail 18 | - Login page that stores their information 19 | - Pulling in COVID data to cross reference their location 20 | 21 | ## 6. What is the technology stack? 22 | - React + React Hooks 23 | - Node/Express 24 | - PostgresQL 25 | - OAuth 26 | - Bcrypt 27 | 28 | ## Team Responsibility breakdown: Who’s working on which part? 29 | - Ai Mi: backend 30 | - Kristiina: backend 31 | - Jonah: frontend 32 | - Sanaya: frontend 33 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | const app = express(); 4 | const PORT = 3000; 5 | const quizController = require('./quizController.js'); 6 | 7 | app.use(express.json()); 8 | 9 | // statically serve everything in the build folder on the route '/build' 10 | app.use('/build', express.static(path.join(__dirname, '../build'))); 11 | 12 | // route handler to send risk assessment results back to client 13 | app.get('*', (req, res) => { 14 | res.status(200).sendFile(path.join(__dirname, '../index.html')); 15 | }); 16 | 17 | // route handlers: 18 | // will receive the Submit event from the frontend when user completes the quiz 19 | // and send assessment result back to frontend: 20 | app.post('/', quizController.calculateRisk, (req, res) => { 21 | res 22 | .status(200) 23 | // .redirect('/results'); 24 | .send(res.locals); 25 | }); 26 | 27 | // serve index.html on all the pages 28 | // app.use('*', (req, res) => { 29 | // res.sendFile(path.join(__dirname, '../index.html')); 30 | // }); 31 | 32 | // global error handler 33 | app.use((err, req, res, next) => { 34 | console.log(err); 35 | res.status(500).send('Internal Server Error'); 36 | }); 37 | 38 | //listen 39 | app.listen(PORT, () => { 40 | console.log(`Listening on ${PORT}`); 41 | }); 42 | 43 | module.exports = app; 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Quiz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "nodemon server/server.js", 8 | "build": "cross-env NODE_ENV=production webpack", 9 | "dev": "cross-env NODE_ENV=development concurrently \"webpack-dev-server --open\" \"nodemon server/server.js\"", 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "@babel/core": "^7.10.3", 17 | "@babel/preset-env": "^7.10.3", 18 | "@babel/preset-react": "^7.10.1", 19 | "babel-loader": "^8.1.0", 20 | "concurrently": "^4.1.0", 21 | "cross-env": "^5.2.0", 22 | "css-loader": "^3.6.0", 23 | "eslint": "^7.13.0", 24 | "eslint-config-prettier": "^6.15.0", 25 | "eslint-config-problems": "^5.0.0", 26 | "extract-text-webpack-plugin": "^3.0.2", 27 | "isomorphic-fetch": "^2.2.1", 28 | "mini-css-extract-plugin": "^0.9.0", 29 | "node-sass": "^4.14.1", 30 | "nodemon": "^1.18.9", 31 | "sass": "^1.26.8", 32 | "sass-loader": "^8.0.2", 33 | "style-loader": "^1.2.1", 34 | "w": "^1.1.0", 35 | "webpack": "^4.43.0", 36 | "webpack-cli": "^3.3.12", 37 | "webpack-dev-server": "^3.11.0" 38 | }, 39 | "dependencies": { 40 | "axios": "^0.19.2", 41 | "express": "^4.17.1", 42 | "react": "^16.13.1", 43 | "react-dom": "^16.14.0", 44 | "react-router-dom": "^5.2.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /server/quizController.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const quizController = {}; 3 | 4 | const riskFactor = { 5 | mail: 1, 6 | takeout: 1, 7 | gas: 1, 8 | tennis: 1, 9 | camp: 1, 10 | grocery: 2, 11 | walk: 2, 12 | restaurantOut: 2, 13 | doctor: 2, 14 | downtown: 2, 15 | house: 3, 16 | bbq: 3, 17 | mall: 3, 18 | kids: 3, 19 | elderly: 3, 20 | hair: 4, 21 | restaurantIn: 4, 22 | plane: 4, 23 | wedding: 4, 24 | hug: 4, 25 | gym: 5, 26 | movie: 5, 27 | music: 5, 28 | religious: 5, 29 | bar: 5, 30 | } 31 | 32 | const risk = { 33 | 1: 'Low', 34 | 2: 'Moderate Low', 35 | 3: 'Moderate', 36 | 4: 'Moderate High', 37 | 5: 'High', 38 | } 39 | 40 | quizController.calculateRisk = (req, res, next) => { 41 | // algorithm for calculating risk goes here 42 | // iterate over req.body.activities 43 | // check if activity against our activity lookup object for the activity's risk value 44 | // assign the activities to the risk 45 | // assign maxNum to highest risk activity 46 | 47 | // if this activity, look in riskFactor object for its value 48 | // example: [mail, gas, grocery, hair, plane] 49 | const acts = req.body.activities; 50 | console.log(req.body.activities); 51 | let max = 0; 52 | let maxRisk; 53 | let maxArray; 54 | // let riskLevel; 55 | 56 | // i = 0: riskFactor[mail] = 1, 1 > 0, make max = 1, maxArray = [mail] 57 | // i = 1: riskFactor[gas] = 1, 1 > 1 -> NO, go to else if. 1 === 1 -> YES!, maxArray = [mail, gas] 58 | // i = 2: riskFactor[grocery] = 2, 2 > 1 -> YES!, make max = 2, maxArray = [grocery] 59 | // i = 3: riskFactor[hair] = 4, 4 > 2 -> YES!, make max = 4, maxArray = [hair] 60 | // i = 4; riskFactor[plane] = 4, 4 > 1 -> NO, go to else if. 4 === 4 -> YES!, maxArray = [hair, plane] 61 | 62 | for (let i = 0; i < acts.length; i += 1) { 63 | if (riskFactor[acts[i]] > max) { 64 | max = riskFactor[acts[i]]; 65 | maxRisk = risk[max]; 66 | maxArray = [acts[i]]; 67 | } else if (riskFactor[acts[i]] === max) { 68 | maxArray.push(acts[i]); 69 | } 70 | } 71 | 72 | res.locals.activities = { 73 | riskLevel: maxRisk, 74 | riskyActs: maxArray 75 | } 76 | 77 | return next(); 78 | } 79 | 80 | module.exports = quizController; -------------------------------------------------------------------------------- /client/questions.js: -------------------------------------------------------------------------------- 1 | let questions = [ 2 | { text: 'Opened the mail', keyword: 'mail' }, 3 | { text: 'Got restaurant takeout', keyword: 'takeout' }, 4 | { text: 'Pumped gasoline', keyword: 'gas' }, 5 | { text: 'Played tennis', keyword: 'tennis' }, 6 | { text: 'Went camping', keyword: 'camp' }, 7 | { text: 'Went grocery shopping', keyword: 'grocery' }, 8 | { text: 'Went for a walk, run, or bike ride with other', keyword: 'walk' }, 9 | { text: 'Ate at a restaurant outside', keyword: 'restaurantOut' }, 10 | { text: "Sat in a doctor's waiting room", keyword: 'doctor' }, 11 | { text: 'Walked in a busy downtown', keyword: 'downtown' }, 12 | { text: "Had a meal at someone else's house", keyword: 'house' }, 13 | { text: 'Attended a backyard barbeque', keyword: 'bbq' }, 14 | { text: 'Shopped at a mall', keyword: 'mall' }, 15 | { text: 'Sent kids to school, camp, or day care', keyword: 'kids' }, 16 | { 17 | text: 'Visited an elderly relative or friend in their home', 18 | keyword: 'elderly', 19 | }, 20 | { text: 'Went to a hair salon or barbershop', keyword: 'hair' }, 21 | { text: 'Ate at a restaurant inside', keyword: 'restaurantIn' }, 22 | { text: 'Traveled by plane', keyword: 'plane' }, 23 | { text: 'Attended a wedding or a funeral', keyword: 'wedding' }, 24 | { text: 'Hugged or shook hands when greeting a friend', keyword: 'hug' }, 25 | { text: 'Worked out at a gym', keyword: 'gym' }, 26 | { text: 'Went to a movie theatre', keyword: 'movie' }, 27 | { text: 'Attended a large music event', keyword: 'music' }, 28 | { 29 | text: 'Attended an indoor religious or cultural event', 30 | keyword: 'religious', 31 | }, 32 | { text: 'Went to a bar', keyword: 'bar' }, 33 | ]; 34 | 35 | // list = list.sort(() => Math.random() - 0.5) 36 | questions = questions.sort(() => Math.random() - 0.5); 37 | questions = questions.sort(() => Math.random() - 0.5); 38 | questions = questions.sort(() => Math.random() - 0.5); 39 | questions = questions.sort(() => Math.random() - 0.5); 40 | questions = questions.sort(() => Math.random() - 0.5); 41 | questions = questions.sort(() => Math.random() - 0.5); 42 | questions = questions.sort(() => Math.random() - 0.5); 43 | questions = questions.sort(() => Math.random() - 0.5); 44 | questions = questions.sort(() => Math.random() - 0.5); 45 | questions = questions.sort(() => Math.random() - 0.5); 46 | questions = questions.sort(() => Math.random() - 0.5); 47 | questions = questions.sort(() => Math.random() - 0.5); 48 | 49 | export default questions; 50 | -------------------------------------------------------------------------------- /client/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Route, Switch } from 'react-router-dom'; 3 | 4 | import AssessmentPage from './components/AssessmentPage.jsx'; 5 | import ResultsPage from './components/ResultsPage.jsx'; 6 | import ErrorPage from './components/ErrorPage.jsx'; 7 | 8 | class App extends Component { 9 | constructor(props) { 10 | super(props); 11 | this.state = { 12 | riskLevel: '', 13 | riskyActs: [], 14 | answers: [], 15 | }; 16 | 17 | this.submitAnswers = this.submitAnswers.bind(this); 18 | this.addToAnswers = this.addToAnswers.bind(this); 19 | this.removeFromAnswers = this.removeFromAnswers.bind(this); 20 | this.getRiskLevel = this.getRiskLevel.bind(this); 21 | this.getRiskyActs = this.getRiskyActs.bind(this); 22 | } 23 | 24 | submitAnswers() { 25 | fetch('/', { 26 | method: 'POST', 27 | headers: { 'Content-Type': 'application/json' }, 28 | body: JSON.stringify({ activities: this.state.answers }), 29 | }) 30 | .then((response) => response.json()) 31 | .then((data) => { 32 | console.log('risky acts include', data.activities.riskyActs); 33 | const newRisk = data.activities.riskLevel; 34 | const newRiskyActs = data.activities.riskyActs; 35 | 36 | this.setState({ 37 | ...this.state, 38 | riskLevel: newRisk, 39 | riskyActs: newRiskyActs, 40 | }); 41 | }); 42 | } 43 | 44 | addToAnswers(keyword) { 45 | const newAnswers = this.state.answers.slice(); 46 | newAnswers.push(keyword); 47 | 48 | console.log('keyword is', keyword, 'new answers include :', newAnswers); 49 | this.setState({ 50 | ...this.state, 51 | answers: newAnswers, 52 | }); 53 | } 54 | 55 | removeFromAnswers(keyword) { 56 | let newAnswers = this.state.answers.slice(); 57 | newAnswers = newAnswers.filter((answer) => answer !== keyword); 58 | 59 | console.log('keyword was ', keyword, 'new answers include :', newAnswers); 60 | this.setState({ 61 | ...this.state, 62 | answers: newAnswers, 63 | }); 64 | } 65 | 66 | getRiskyActs() { 67 | return this.state.riskyActs; 68 | } 69 | 70 | getRiskLevel() { 71 | return this.state.riskLevel; 72 | } 73 | 74 | render() { 75 | return ( 76 |
77 |

Covid Risk Assessment Quiz

78 | 79 | 80 | 85 | 86 | 87 | 88 | 94 | 95 | 96 | 97 |
98 | ); 99 | } 100 | } 101 | 102 | export default App; 103 | -------------------------------------------------------------------------------- /client/styles/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Shrikhand&display=swap'); 2 | 3 | body { 4 | box-sizing: content-box; 5 | /* background: url("https://user-images.githubusercontent.com/54503796/99884480-83ec8180-2bfc-11eb-824b-2c484ba02014.jpg"); */ 6 | /* background: url("https://user-images.githubusercontent.com/54503796/99885890-1ba29d80-2c06-11eb-9852-199778c60251.jpg"); 7 | background-size: 50%; */ 8 | background: rgb(215, 247, 244); 9 | background: url('https://user-images.githubusercontent.com/54503796/99887077-5957f400-2c0f-11eb-9720-eebdf664f283.png'), 10 | linear-gradient( 11 | 90deg, 12 | rgba(215, 247, 244, 1) 0%, 13 | rgba(177, 241, 180, 1) 27%, 14 | rgba(240, 232, 127, 1) 50%, 15 | rgba(254, 189, 82, 1) 72%, 16 | rgba(255, 107, 0, 1) 100% 17 | ); 18 | } 19 | 20 | h1 { 21 | font-family: 'Shrikhand', cursive; 22 | font-size: 4.25em; 23 | color: #3a057b; 24 | padding: 0; 25 | margin: 0 0 0 60px; 26 | } 27 | 28 | #assessment-page { 29 | display: grid; 30 | grid-template-columns: 1fr 3fr; 31 | } 32 | 33 | .window { 34 | border: solid 0px black; 35 | padding: 40px 0 0 40px; 36 | margin: 0; 37 | } 38 | 39 | .question { 40 | border: dotted 0px grey; 41 | font-family: 'Roboto', sans-serif; 42 | font-weight: 400; 43 | font-size: 1.25em; 44 | /* margin: 10px; */ 45 | padding-top: 15px; 46 | } 47 | 48 | .window button { 49 | padding: 0.7em 4em; 50 | margin: 30px 120px; 51 | border: 0.1em solid #ffffff; 52 | border-radius: 0.12em; 53 | text-decoration: none; 54 | font-family: 'Roboto', sans-serif; 55 | font-weight: 700; 56 | font-size: 1.3em; 57 | color: white; 58 | text-align: center; 59 | background-color: #3a057b; 60 | } 61 | 62 | .about-window { 63 | border-radius: 10px; 64 | background: #ffffff; 65 | flex: 1; 66 | max-width: 100%; 67 | padding: 25px 30px; 68 | /* margin: 0 60px; */ 69 | /* margin: 40px 100px 40px 40px; */ 70 | box-shadow: 5px 10px 20px rgba(10, 10, 10, 0.2); 71 | } 72 | 73 | .about-window h3 { 74 | border: 0px solid red; 75 | font-family: 'Roboto', sans-serif; 76 | font-weight: bold; 77 | font-size: 2em; 78 | color: #fe6c06; 79 | padding: 5px 0 0 0; 80 | margin: 0px; 81 | } 82 | 83 | .about-window p { 84 | font-family: 'Roboto', sans-serif; 85 | font-weight: 400; 86 | font-size: 1em; 87 | padding: 10px 0 0 0; 88 | margin: 0; 89 | } 90 | 91 | .assessment-window { 92 | flex: 2; 93 | max-width: 60%; 94 | /* align-self: center; */ 95 | padding: 30px 40px; 96 | margin: 0 120px; 97 | /* margin: 40px 40px 40px 0; */ 98 | border-radius: 10px; 99 | background: #ffffff; 100 | box-shadow: 5px 10px 20px rgba(10, 10, 10, 0.2); 101 | } 102 | 103 | .assessment-window h3 { 104 | font-family: 'Roboto', sans-serif; 105 | font-weight: 700; 106 | font-size: 2em; 107 | color: #fe6c06; 108 | padding: 0; 109 | margin: 0 0 5px 0; 110 | } 111 | 112 | #results-header { 113 | font-family: 'Shrikhand', cursive; 114 | font-weight: bold; 115 | font-size: 2.5em; 116 | color: #3a057b; 117 | padding: 5px 0; 118 | margin: 0px; 119 | } 120 | 121 | .results-label { 122 | font-family: 'Roboto', sans-serif; 123 | font-weight: 700; 124 | font-size: 1.75em; 125 | color: #3a057b; 126 | padding: 5px 0; 127 | margin: 0px; 128 | } 129 | 130 | .activity { 131 | font-family: 'Roboto', sans-serif; 132 | font-weight: 400; 133 | font-size: 2em; 134 | color: #fe6c06; 135 | padding: 0; 136 | margin: 0; 137 | } 138 | 139 | #results-window { 140 | max-width: 80%; 141 | /* align-self: center; */ 142 | padding: 30px 40px; 143 | margin: 0 60px; 144 | /* margin: 40px 40px 40px 0; */ 145 | border-radius: 10px; 146 | background: #ffffff; 147 | box-shadow: 5px 10px 20px rgba(10, 10, 10, 0.2); 148 | } 149 | 150 | #questions { 151 | display: grid; 152 | grid-template-columns: 1fr 1fr; 153 | } 154 | --------------------------------------------------------------------------------