├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
└── src
    ├── App.js
    ├── QuizForm.js
    ├── QuizFormResult.js
    ├── index.js
    ├── registerServiceWorker.js
    ├── store.js
    └── validate.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Wing Kam Wong
 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 | # react-quiz-form
  2 | A redux form for creating quizzes in React
  3 | 
  4 | react-quiz-form is a ReactJS component integrated with [Redux From](https://github.com/erikras/redux-form). It aims to allow users to create a quiz manually and outputs a JSON file for [react-quiz-component](https://github.com/wingkwong/react-quiz-component) to process. 
  5 | 
  6 | >> react-quiz-form currently only supports [react-quiz-component](https://github.com/wingkwong/react-quiz-component) v0.2.8.
  7 | 
  8 | ## Structure breakdown:
  9 | - Quiz Title
 10 | - Quiz Synopsis
 11 | - Questions
 12 | 	- Title
 13 | 	- Type (Text or Photo)
 14 | - Answers
 15 | 	- Answer #n (Max number of n: 4)
 16 | - Correct Answer
 17 | - Message for Correct Answer
 18 | - Message for Incorrect Answer
 19 | - Explaination
 20 | - Point
 21 | 
 22 | ## Validation
 23 | - All fields are required except `messageForCorrectAnswer`, `messageForIncorrectAnswer`, and `explanation`
 24 | - At least one question has to be created
 25 | - At least two answers have to be created
 26 | - Max four answers in one question are allowed
 27 | 
 28 | ## Result
 29 | ```json
 30 | {
 31 |   "quizTitle": "React Quiz Demo - https://github.com/wingkwong/react-quiz",
 32 |   "quizSynopsis": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim",
 33 |   "questions": [
 34 |     {
 35 |       "question": "How can you access the state of a component from inside of a member function?",
 36 |       "questionType": "text",
 37 |       "answers": [
 38 |         "this.getState()",
 39 |         "this.prototype.stateValue",
 40 |         "this.state",
 41 |         "this.values"
 42 |       ],
 43 |       "correctAnswer": "3",
 44 |       "messageForCorrectAnswer": "Correct answer. Good job.",
 45 |       "messageForIncorrectAnswer": "Incorrect answer. Please try again.",
 46 |       "explanation": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
 47 |       "point": "20"
 48 |     },
 49 |     {
 50 |       "question": "ReactJS is developed by _____?",
 51 |       "questionType": "text",
 52 |       "answers": [
 53 |         "Google Engineers",
 54 |         "Facebook Engineers"
 55 |       ],
 56 |       "correctAnswer": "2",
 57 |       "messageForCorrectAnswer": "Correct answer. Good job.",
 58 |       "messageForIncorrectAnswer": "Incorrect answer. Please try again.",
 59 |       "explanation": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
 60 |       "point": "20"
 61 |     },
 62 |     {
 63 |       "question": "ReactJS is an MVC based framework?",
 64 |       "questionType": "text",
 65 |       "answers": [
 66 |         "True",
 67 |         "False"
 68 |       ],
 69 |       "correctAnswer": "2",
 70 |       "messageForCorrectAnswer": "Correct answer. Good job.",
 71 |       "messageForIncorrectAnswer": "Incorrect answer. Please try again.",
 72 |       "explanation": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
 73 |       "point": "20"
 74 |     },
 75 |     {
 76 |       "question": "Which of the following concepts is/are key to ReactJS?",
 77 |       "questionType": "text",
 78 |       "answers": [
 79 |         "Component-oriented design",
 80 |         "Event delegation model",
 81 |         "Both of the above",
 82 |       ],
 83 |       "correctAnswer": "3",
 84 |       "messageForCorrectAnswer": "Correct answer. Good job.",
 85 |       "messageForIncorrectAnswer": "Incorrect answer. Please try again.",
 86 |       "explanation": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
 87 |       "point": "20"
 88 |     },
 89 |     {
 90 |       "question": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
 91 |       "questionType": "photo",
 92 |       "answers": [
 93 |         "https://dummyimage.com/600x400/000/fff&text=A",
 94 |         "https://dummyimage.com/600x400/000/fff&text=B",
 95 |         "https://dummyimage.com/600x400/000/fff&text=C",
 96 |         "https://dummyimage.com/600x400/000/fff&text=D"
 97 |       ],
 98 |       "correctAnswer": "1",
 99 |       "messageForCorrectAnswer": "Correct answer. Good job.",
100 |       "messageForIncorrectAnswer": "Incorrect answer. Please try again.",
101 |       "explanation": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
102 |       "point": "20"
103 |     }
104 |   ]
105 | } 
106 | ```
107 | 
108 | ## Development
109 | - Clone the project
110 | - run `npm install`
111 | - run `npm run start`
112 | 
113 | ## Demo
114 | The demo is available at https://wingkwong.github.io/react-quiz-form/
115 | 
116 | ## License
117 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-quiz-form",
 3 |   "version": "0.1.3",
 4 |   "private": true,
 5 |   "homepage": "https://wingkwong.github.io/react-quiz-form/",
 6 |   "dependencies": {
 7 |     "react": "^16.3.2",
 8 |     "react-copy-to-clipboard": "^5.0.1",
 9 |     "react-dom": "^16.3.2",
10 |     "react-redux": "^5.0.7",
11 |     "react-scripts": "1.1.4",
12 |     "redux": "^4.0.0",
13 |     "redux-form": "^7.3.0"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test --env=jsdom",
19 |     "eject": "react-scripts eject",
20 |     "predeploy": "npm run build",
21 |     "deploy": "gh-pages -d build"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wingkwong/react-quiz-form/0c1dd8ba250e778c3d2555e1257fdfeb13af835d/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
14 |     <link rel="stylesheet" type="text/css" href="https://redux-form.com/6.6.2/bundle.css">
15 |     <!--
16 |       Notice the use of %PUBLIC_URL% in the tags above.
17 |       It will be replaced with the URL of the `public` folder during the build.
18 |       Only files inside the `public` folder can be referenced from the HTML.
19 | 
20 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
21 |       work correctly both with client-side routing and a non-root public URL.
22 |       Learn how to configure a non-root public URL by running `npm run build`.
23 |     -->
24 |     <title>Reac Quiz Form</title>
25 |   </head>
26 |   <body>
27 |     <noscript>
28 |       You need to enable JavaScript to run this app.
29 |     </noscript>
30 |     <div id="root"></div>
31 |     <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import QuizForm from './QuizForm';
 3 | import QuizFormResult from './QuizFormResult';
 4 | 
 5 | class App extends Component {
 6 |   constructor(props){
 7 |   	super(props);
 8 |   	this.state = {
 9 |   		result : null
10 |   	}
11 |   }
12 | 
13 |   setResult = (values) =>{
14 | 	  this.setState({
15 | 	  	result : JSON.stringify(values, null, 2)
16 | 	  })
17 |   }
18 | 
19 |   render() {
20 |     return (
21 |       <div className="App">
22 |        	<QuizForm onSubmit={this.setResult} />
23 |        	<QuizFormResult result={this.state.result}/>
24 |       </div>
25 |     );
26 |   }
27 | }
28 | 
29 | export default App;


--------------------------------------------------------------------------------
/src/QuizForm.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { connect } from 'react-redux'
  3 | import { Field, FieldArray, reduxForm, formValueSelector } from 'redux-form';
  4 | import range from 'lodash/range'
  5 | import validate from './validate';
  6 | 
  7 | class QuizForm extends Component {
  8 | 
  9 |   renderInputField = ({ input, label, type, meta: { touched, error } }) => (
 10 |     <div>
 11 |       <label>{label}</label>
 12 |       <div>
 13 |         <input {...input} type={type} placeholder={label} />
 14 |         {touched && error && <span>{error}</span>}
 15 |       </div>
 16 |     </div>
 17 |   );
 18 | 
 19 |   renderTextareaField = ({ input, label, type, meta: { touched, error } }) => (
 20 |     <div>
 21 |       <label>{label}</label>
 22 |       <div>
 23 |         <textarea {...input} type={type} placeholder={label} />
 24 |         {touched && error && <span>{error}</span>}
 25 |       </div>
 26 |     </div>
 27 |   );
 28 | 
 29 |    renderSelectField = ({ input, label, type, meta: { touched, error }, children }) => (
 30 |     <div>
 31 |       <label>{label}</label>
 32 |       <div>
 33 |         <select {...input} >
 34 |           {children}
 35 |         </select>
 36 |         {touched && error && <span>{error}</span>}
 37 |       </div>
 38 |     </div>
 39 |   );
 40 |   
 41 |    renderSelectQuestionTypeField = ({ input, label, type, meta: { touched, error }, children }) => (
 42 |     <div>
 43 |       <label>{label}</label>
 44 |       <div>
 45 |         <select {...input} >
 46 |           {children}
 47 |         </select>
 48 |         {touched && error && <span>{error}</span>}
 49 |       </div>
 50 |     </div>
 51 |   );
 52 |   
 53 |    renderTextAnswers = ({ fields, question, meta: { error } }) => (
 54 |     <ul>
 55 |       <li>
 56 |         <button type="button" onClick={() => fields.push()}>Add Answer</button>
 57 |       </li>
 58 |       {fields.map((answer, index) => (
 59 |         <li key={index}>
 60 |           <button
 61 |             type="button"
 62 |             title="Remove Answer"
 63 |             onClick={() => fields.remove(index)}
 64 |           />
 65 |           <Field
 66 |             name={answer}
 67 |             type="text"
 68 |             component={this.renderInputField}
 69 |             label={`Answer #${index + 1}`}
 70 |           />
 71 |         </li>
 72 |       ))}
 73 |           <li>
 74 |            <Field
 75 |             name={`${question}.correctAnswer`}
 76 |             component={this.renderSelectField}
 77 |             label="Correct Answer"
 78 |           >
 79 |             <option value="">Please select correct answer</option>
 80 |              {fields.map((answer, index) => (
 81 |                <option key={index+1} value={index+1}>{`Answer #${index + 1}`}</option>
 82 |              ))}
 83 |           </Field>
 84 |           </li>
 85 |     
 86 |       {error && <li className="error">{error}</li>}
 87 |     </ul>
 88 |   );
 89 |   
 90 |   
 91 |    renderQuestions = ({ fields, meta: { touched, error, submitFailed } }) => (
 92 |     <ul>
 93 |       <li>
 94 |         <button type="button" onClick={() => fields.push({})}>Add Question</button>
 95 |         {(touched || submitFailed) && error && <span>{error}</span>}
 96 |       </li>
 97 |       {fields.map((question, index) => (
 98 |         <li key={index}>
 99 |           <button
100 |             type="button"
101 |             title="Remove Question"
102 |             onClick={() => fields.remove(index)}
103 |           />
104 |           <h4>Question #{index + 1}</h4>
105 |           <Field
106 |             name={`${question}.question`}
107 |             type="text"
108 |             component={this.renderInputField}
109 |             label="Question Title"
110 |           />
111 |           <Field
112 |             name={`${question}.questionType`}
113 |             component={this.renderSelectQuestionTypeField}
114 |             label="Question Type"
115 |           >
116 |             <option value="">Please select a question type</option>
117 |             <option value="text">Text</option>
118 |             <option value="photo">Photo</option>
119 |           </Field>
120 |           <FieldArray name={`${question}.answers`} component={this.renderTextAnswers} question={question} />
121 |           <Field
122 |             name={`${question}.messageForCorrectAnswer`}
123 |             type="text"
124 |             component={this.renderTextareaField}
125 |             label="Message for Correct Answer"
126 |           />
127 |           <Field
128 |             name={`${question}.messageForIncorrectAnswer`}
129 |             type="text"
130 |             component={this.renderTextareaField}
131 |             label="Message for Incorrect Answer"
132 |           />
133 |           <Field
134 |             name={`${question}.explanation`}
135 |             type="text"
136 |             component={this.renderTextareaField}
137 |             label="Explanation"
138 |           />
139 |            <Field
140 |             name={`${question}.point`}
141 |             type="number"
142 |             component={this.renderInputField}
143 |             label="Point"
144 |           />
145 |         </li>
146 |       ))}
147 |     </ul>
148 |   );
149 | 
150 |   render() {
151 | 
152 |   const { handleSubmit, pristine, reset, submitting } = this.props;
153 | 
154 |     return (
155 |       <div className="QuizForm">
156 |          <form name="quiz-form" onSubmit={handleSubmit}>
157 | 	      <Field
158 | 	        name="quizTitle"
159 | 	        type="text"
160 | 	        component={this.renderInputField}
161 | 	        label="Quiz Title"
162 | 	      />
163 |         <Field
164 | 	        name="quizSynopsis"
165 | 	        type="text"
166 | 	        component={this.renderTextareaField}
167 | 	        label="Quiz Synopsis"
168 | 	      />
169 | 	      <FieldArray name="questions" component={this.renderQuestions} />
170 | 	      <div>
171 | 	        <button type="submit" disabled={submitting}>Submit</button>
172 | 	        <button type="button" disabled={pristine || submitting} onClick={reset}>
173 | 	          Clear Values
174 | 	        </button>
175 | 	      </div>
176 | 	    </form>
177 |       </div>
178 |     );
179 |   }
180 | }
181 | 
182 | QuizForm = reduxForm({
183 |   form: 'quizForm',
184 |   validate
185 | })(QuizForm);
186 | 
187 | const selector = formValueSelector('quizForm');
188 | 
189 | QuizForm = connect(
190 |   state => {
191 |     const questions = selector(state, 'questions');
192 |     const questionType = questions && questions.map(question => question.questionType);
193 | 
194 |     return { questionType: questionType }
195 |   }
196 | )(QuizForm)
197 | 
198 | 
199 | export default QuizForm;


--------------------------------------------------------------------------------
/src/QuizFormResult.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import {CopyToClipboard} from 'react-copy-to-clipboard';
 3 | 
 4 | class QuizFormResult extends Component {
 5 |   constructor(props){
 6 |     super(props);
 7 |     this.state = {
 8 |       copied: false,
 9 |     };
10 |   }
11 | 
12 |   render() {
13 |     const { result } = this.props;
14 |     const style = {
15 |       resultBox: {
16 |         background: '#e1f5fe',
17 |         minHeight: 260,
18 |         padding: 20,
19 |         margin: 20
20 |       },
21 |       button: {
22 |         whiteSpace: 'nowrap',
23 |         display: 'inline-block',
24 |         borderRadius: '5px',
25 |         padding: '10px 15px',
26 |         margin: '0 0 20px 20px',
27 |         fontSize: '20px',
28 |         color: '#fff',
29 |         backgroundImage: 'linear-gradient(#4f93ce,#285f8f)',
30 |         border: '1px solid #285f8f',  
31 |         cursor: 'pointer'
32 |       }
33 |     }
34 | 
35 |     return (
36 |       <div className="QuizFormResult">
37 |        	  {result != null? (
38 |               <div>
39 |                 <div style={style.resultBox}>
40 |                  <pre> {result} </pre>
41 |               </div>
42 |               <div>
43 |                 <CopyToClipboard text={result}
44 |                   onCopy={() => this.setState({copied: true})}>
45 |                   <button style={style.button}>Copy to Clipboard</button>
46 |                 </CopyToClipboard> 
47 |               </div>
48 | 
49 |               </div>
50 |               
51 | 
52 |           ) : (
53 |             null
54 |           )}
55 |       </div>
56 |     );
57 |   }
58 | }
59 | 
60 | export default QuizFormResult;


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | import registerServiceWorker from './registerServiceWorker';
 5 | import { Provider } from "react-redux";
 6 | import store from "./store";
 7 | 
 8 | ReactDOM.render(
 9 |   <Provider store={store}>
10 |     <App />
11 |   </Provider>,
12 |   document.getElementById("root")
13 | );
14 | registerServiceWorker();


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 | 
 39 |         // Add some additional logging to localhost, pointing developers to the
 40 |         // service worker/PWA documentation.
 41 |         navigator.serviceWorker.ready.then(() => {
 42 |           console.log(
 43 |             'This web app is being served cache-first by a service ' +
 44 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
 45 |           );
 46 |         });
 47 |       } else {
 48 |         // Is not local host. Just register service worker
 49 |         registerValidSW(swUrl);
 50 |       }
 51 |     });
 52 |   }
 53 | }
 54 | 
 55 | function registerValidSW(swUrl) {
 56 |   navigator.serviceWorker
 57 |     .register(swUrl)
 58 |     .then(registration => {
 59 |       registration.onupdatefound = () => {
 60 |         const installingWorker = registration.installing;
 61 |         installingWorker.onstatechange = () => {
 62 |           if (installingWorker.state === 'installed') {
 63 |             if (navigator.serviceWorker.controller) {
 64 |               // At this point, the old content will have been purged and
 65 |               // the fresh content will have been added to the cache.
 66 |               // It's the perfect time to display a "New content is
 67 |               // available; please refresh." message in your web app.
 68 |               console.log('New content is available; please refresh.');
 69 |             } else {
 70 |               // At this point, everything has been precached.
 71 |               // It's the perfect time to display a
 72 |               // "Content is cached for offline use." message.
 73 |               console.log('Content is cached for offline use.');
 74 |             }
 75 |           }
 76 |         };
 77 |       };
 78 |     })
 79 |     .catch(error => {
 80 |       console.error('Error during service worker registration:', error);
 81 |     });
 82 | }
 83 | 
 84 | function checkValidServiceWorker(swUrl) {
 85 |   // Check if the service worker can be found. If it can't reload the page.
 86 |   fetch(swUrl)
 87 |     .then(response => {
 88 |       // Ensure service worker exists, and that we really are getting a JS file.
 89 |       if (
 90 |         response.status === 404 ||
 91 |         response.headers.get('content-type').indexOf('javascript') === -1
 92 |       ) {
 93 |         // No service worker found. Probably a different app. Reload the page.
 94 |         navigator.serviceWorker.ready.then(registration => {
 95 |           registration.unregister().then(() => {
 96 |             window.location.reload();
 97 |           });
 98 |         });
 99 |       } else {
100 |         // Service worker found. Proceed as normal.
101 |         registerValidSW(swUrl);
102 |       }
103 |     })
104 |     .catch(() => {
105 |       console.log(
106 |         'No internet connection found. App is running in offline mode.'
107 |       );
108 |     });
109 | }
110 | 
111 | export function unregister() {
112 |   if ('serviceWorker' in navigator) {
113 |     navigator.serviceWorker.ready.then(registration => {
114 |       registration.unregister();
115 |     });
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
1 | import { createStore, combineReducers } from "redux";
2 | import { reducer as formReducer } from "redux-form";
3 | 
4 | const rootReducer = combineReducers({
5 |   form: formReducer
6 | });
7 | 
8 | export default createStore(rootReducer);


--------------------------------------------------------------------------------
/src/validate.js:
--------------------------------------------------------------------------------
 1 | const validate = values => {
 2 |   const errors = {}
 3 |   if (!values.quizTitle) {
 4 |     errors.quizTitle = 'Required'
 5 |   }
 6 |   if (!values.questions || !values.questions.length) {
 7 |     errors.questions = { _error: 'At least one question must be entered' }
 8 |   } else {
 9 |     const questionsArrayErrors = []
10 |     values.questions.forEach((question, questionIndex) => {
11 |       const questionErrors = {}
12 |       if (!question || !question.question) {
13 |         questionErrors.question = 'Required'
14 |         questionsArrayErrors[questionIndex] = questionErrors
15 |       }
16 |         if (!question.questionType){
17 |           questionErrors.questionType =  'Required';
18 |           questionsArrayErrors[questionIndex] = questionErrors;
19 |           
20 |         }
21 | 
22 |       if (question && question.answers && question.answers.length) {
23 |         const answerArrayErrors = []
24 |         question.answers.forEach((answer, answerIndex) => {
25 |         if (!answer || !answer.length) {
26 |             answerArrayErrors[answerIndex] = 'Required'
27 |           }
28 |         })
29 | 
30 |         if (answerArrayErrors.length) {
31 |           questionErrors.answers = answerArrayErrors
32 |           questionsArrayErrors[questionIndex] = questionErrors
33 |         }
34 | 
35 |         if (question.answers.length > 4) {
36 |           if (!questionErrors.answers) {
37 |             questionErrors.answers = []
38 |           }
39 |           questionErrors.answers._error = 'No more than four answers allowed'
40 |           questionsArrayErrors[questionIndex] = questionErrors
41 |         }
42 |         if (!question.correctAnswer){
43 |           questionErrors.correctAnswer =  'Required';
44 |           questionsArrayErrors[questionIndex] = questionErrors;
45 |          }
46 |       }
47 | 
48 |       if (!question.answers || question.answers.length === 0) {
49 |         if (!questionErrors.answers) {
50 |           questionErrors.answers = []
51 |         }
52 |         questionErrors.answers._error = 'At least one answer must be entered'
53 |         questionsArrayErrors[questionIndex] = questionErrors
54 |       }
55 | 
56 |     })
57 | 
58 |     if (questionsArrayErrors.length) {
59 |       errors.questions = questionsArrayErrors
60 |     }
61 |   }
62 |   return errors
63 | }
64 | 
65 | export default validate


--------------------------------------------------------------------------------