diff --git a/package-lock.json b/package-lock.json index 8cb28f8a975087d18e920ea5e4ead9eb7d6c724c..094d2cce6044e1f8edab793aeb648f2a777df42d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12459,6 +12459,11 @@ "has-flag": "^3.0.0" } }, + "survey-react": { + "version": "1.5.17", + "resolved": "https://registry.npmjs.org/survey-react/-/survey-react-1.5.17.tgz", + "integrity": "sha512-0MoF9BgCZxc+ZiATgH1fAqIeIebMRKy5oJxOz0m8SnB6ohX74LlFVJUK4zYCeJW2TB21CHWNLVll6G1AiEKc2Q==" + }, "svg-parser": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", diff --git a/package.json b/package.json index 069da3db867c01f9c0d324712930b81bb32e5a99..641fcbfc7dd826cb7a01e7a36fc4af651a1695f5 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", - "react-transition-group": "^4.3.0" + "react-transition-group": "^4.3.0", + "survey-react": "^1.5.17" }, "scripts": { "start": "react-scripts start", diff --git a/public/index.html b/public/index.html index a74e9f86b0ee3fbb38af63201406d721c7b5e1d4..06ce34f1c976c809615a5e4907be5dc203174dbf 100644 --- a/public/index.html +++ b/public/index.html @@ -39,6 +39,8 @@ crossorigin="anonymous" /> + <link href="https://unpkg.com/survey-react/survey.min.css" type="text/css" rel="stylesheet"/> + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" @@ -55,6 +57,8 @@ crossorigin="anonymous" ></script> + <script src="https://unpkg.com/survey-react"></script> + <!-- Javascript for homepage image carousel --> <script src="%PUBLIC_URL%/js/main.js" defer></script> diff --git a/src/components/Faq.js b/src/components/Faq.js index cfdcefd48ae6437e9e635163da73215ef1cc835d..59319864c8978f5b3738ec3eb80fecb424c2d4d5 100644 --- a/src/components/Faq.js +++ b/src/components/Faq.js @@ -6,236 +6,236 @@ export default class FAQ extends Component { return ( <div> <div id="FAQGeneral"> - <h4> - Frequently Asked Questions - </h4> - <div id="FAQQuestions"> - <section - className="accordion-section clearfix mt-3" - aria-label="Question Accordions" - > - <div className="container"> - <div - className="panel-group" - id="accordion" - role="tablist" - aria-multiselectable="true" - > - <div className="panel panel-default"> - <div - className="panel-heading p-3 mb-3" - role="tab" - id="heading0" - > - <h3 className="panel-title"> - <a - className="collapsed" - role="button" - title="" - data-toggle="collapse" - data-parent="#accordion" - href="#collapse0" - aria-expanded="true" - aria-controls="collapse0" - > - 1.) What is the Food Safety Modernization Act? - </a> - </h3> - </div> - <div - id="collapse0" - className="panel-collapse collapse" - role="tabpanel" - aria-labelledby="heading0" - > - <div className="panel-body px-3 mb-4"> - <p> - The Food Safety Modernization Act (FSMA) was passed - in 2011 by President Obama and is the most sweeping - reform of our food safety laws in more than 70 years - (since the Food Drug and Cosmetic Act of 1938). The - act aims to ensure the US food supply is safe by - shifting the focus from responding to contamination - to preventing it. The Food and Drug Administration - has developed seven different regulations that - encompass FSMA including: - </p> - <ul> - <li> - Produce Safety Rule - </li> - <li> - Preventive Controls for Human Food Rule - </li> - <li> - Preventive Controls for Animal Food Rule - </li> - <li> - Mitigation Strategies to Protect Food Against - Intentional Adulteration Rule - </li> - <li> - Sanitary Transportation of Human and Animal Food - Rule - </li> - <li> - Foreign Supplier Verification Programs Rule - </li> - <li> - Accredited Third-Party Certification Rule - </li> - </ul> + <h4> + Frequently Asked Questions + </h4> + <div id="FAQQuestions"> + <section + className="accordion-section clearfix mt-3" + aria-label="Question Accordions" + > + <div className="container"> + <div + className="panel-group" + id="accordion" + role="tablist" + aria-multiselectable="true" + > + <div className="panel panel-default"> + <div + className="panel-heading p-3 mb-3" + role="tab" + id="heading0" + > + <h3 className="panel-title"> + <a + className="collapsed" + role="button" + title="" + data-toggle="collapse" + data-parent="#accordion" + href="#collapse0" + aria-expanded="true" + aria-controls="collapse0" + > + 1.) What is the Food Safety Modernization Act? + </a> + </h3> + </div> + <div + id="collapse0" + className="panel-collapse collapse" + role="tabpanel" + aria-labelledby="heading0" + > + <div className="panel-body px-3 mb-4"> + <p> + The Food Safety Modernization Act (FSMA) was passed + in 2011 by President Obama and is the most sweeping + reform of our food safety laws in more than 70 years + (since the Food Drug and Cosmetic Act of 1938). The + act aims to ensure the US food supply is safe by + shifting the focus from responding to contamination + to preventing it. The Food and Drug Administration + has developed seven different regulations that + encompass FSMA including: + </p> + <ul> + <li> + Produce Safety Rule + </li> + <li> + Preventive Controls for Human Food Rule + </li> + <li> + Preventive Controls for Animal Food Rule + </li> + <li> + Mitigation Strategies to Protect Food Against + Intentional Adulteration Rule + </li> + <li> + Sanitary Transportation of Human and Animal Food + Rule + </li> + <li> + Foreign Supplier Verification Programs Rule + </li> + <li> + Accredited Third-Party Certification Rule + </li> + </ul> + </div> </div> </div> - </div> - <div className="panel panel-default"> - <div - className="panel-heading p-3 mb-3" - role="tab" - id="heading1" - > - <h3 className="panel-title"> - <a - className="collapsed" - role="button" - title="" - data-toggle="collapse" - data-parent="#accordion" - href="#collapse1" - aria-expanded="true" - aria-controls="collapse1" - > - 2.) What is the Produce Safety Rule? - </a> - </h3> - </div> - <div - id="collapse1" - className="panel-collapse collapse" - role="tabpanel" - aria-labelledby="heading1" - > - <div className="panel-body px-3 mb-4"> - <p> - The Produce Safety Rule (PSR) is one of the seven - food safety regulations that are part of the Food - Safety Modernization Act (FSMA). The PSR sets a - series of standards for the safe growing, - harvesting, packing, and holding of produce grown - for human consumption: 21 Code of Federal - Regulations Part 112. - </p> - <p> - Similar to the other FSMA rules, the PSR aims to be - proactive rather than reactive by focusing on - high-risk practices and identification of hazards - within individual operations. For example, there are - no requirements for uncontrollable factors, such as - number of wildlife allowed in fields. Instead, the - PSR mandates covered produce not be harvested when - contaminated by feces (e.g., bird dropping on a - tomato intended for fresh market). - </p> - <p> - Standards are set for: agricultural water; - biological soil amendments; sprouts; wildlife and - domesticated animals; worker health, hygiene, and - training; equipment, tools, and buildings; among - others. - </p> + <div className="panel panel-default"> + <div + className="panel-heading p-3 mb-3" + role="tab" + id="heading1" + > + <h3 className="panel-title"> + <a + className="collapsed" + role="button" + title="" + data-toggle="collapse" + data-parent="#accordion" + href="#collapse1" + aria-expanded="true" + aria-controls="collapse1" + > + 2.) What is the Produce Safety Rule? + </a> + </h3> + </div> + <div + id="collapse1" + className="panel-collapse collapse" + role="tabpanel" + aria-labelledby="heading1" + > + <div className="panel-body px-3 mb-4"> + <p> + The Produce Safety Rule (PSR) is one of the seven + food safety regulations that are part of the Food + Safety Modernization Act (FSMA). The PSR sets a + series of standards for the safe growing, + harvesting, packing, and holding of produce grown + for human consumption: 21 Code of Federal + Regulations Part 112. + </p> + <p> + Similar to the other FSMA rules, the PSR aims to be + proactive rather than reactive by focusing on + high-risk practices and identification of hazards + within individual operations. For example, there are + no requirements for uncontrollable factors, such as + number of wildlife allowed in fields. Instead, the + PSR mandates covered produce not be harvested when + contaminated by feces (e.g., bird dropping on a + tomato intended for fresh market). + </p> + <p> + Standards are set for: agricultural water; + biological soil amendments; sprouts; wildlife and + domesticated animals; worker health, hygiene, and + training; equipment, tools, and buildings; among + others. + </p> + </div> </div> </div> - </div> - <div className="panel panel-default"> - <div - className="panel-heading p-3 mb-3" - role="tab" - id="heading2" - > - <h3 className="panel-title"> - <a - className="collapsed" - role="button" - title="" - data-toggle="collapse" - data-parent="#accordion" - href="#collapse2" - aria-expanded="true" - aria-controls="collapse2" - > - 3.) Is the Produce Safety Rule the same as GAP - Certification? - </a> - </h3> - </div> - <div - id="collapse2" - className="panel-collapse collapse" - role="tabpanel" - aria-labelledby="heading2" - > - <div className="panel-body px-3 mb-4"> - <p> - No, the Produce Safety Rule (PSR) is a regulation - that establishes science-based minimum standards for - safe production and harvesting of fresh fruits and - vegetables. These standards are based on a - foundation of Good Agricultural Practices (GAPs). - However, while the PSR is based on a solid framework - of understanding on-farm risks and GAPs, it is not - the same as GAP certification. Whereas the PSR is - regulatory and mandatory for growers who are covered - under the PSR, GAP certification is a voluntary - program often required by industry and buyers. - </p> + <div className="panel panel-default"> + <div + className="panel-heading p-3 mb-3" + role="tab" + id="heading2" + > + <h3 className="panel-title"> + <a + className="collapsed" + role="button" + title="" + data-toggle="collapse" + data-parent="#accordion" + href="#collapse2" + aria-expanded="true" + aria-controls="collapse2" + > + 3.) Is the Produce Safety Rule the same as GAP + Certification? + </a> + </h3> + </div> + <div + id="collapse2" + className="panel-collapse collapse" + role="tabpanel" + aria-labelledby="heading2" + > + <div className="panel-body px-3 mb-4"> + <p> + No, the Produce Safety Rule (PSR) is a regulation + that establishes science-based minimum standards for + safe production and harvesting of fresh fruits and + vegetables. These standards are based on a + foundation of Good Agricultural Practices (GAPs). + However, while the PSR is based on a solid framework + of understanding on-farm risks and GAPs, it is not + the same as GAP certification. Whereas the PSR is + regulatory and mandatory for growers who are covered + under the PSR, GAP certification is a voluntary + program often required by industry and buyers. + </p> + </div> </div> </div> - </div> - <div className="panel panel-default"> - <div - className="panel-heading p-3 mb-3" - role="tab" - id="heading3" - > - <h3 className="panel-title"> - <a - className="collapsed" - role="button" - title="" - data-toggle="collapse" - data-parent="#accordion" - href="#collapse3" - aria-expanded="true" - aria-controls="collapse3" - > - 4.) How do I know if I am covered or exempt? - </a> - </h3> - </div> - <div - id="collapse3" - className="panel-collapse collapse" - role="tabpanel" - aria-labelledby="heading3" - > - <div className="panel-body px-3 mb-4"> - <p> - By registering and logging into this site, you can - fill out a questionnaire that will ask certain - questions regarding your farm and produce. Based on - your responses, it will determine whether or not you - are covered and/or exempt. - </p> + <div className="panel panel-default"> + <div + className="panel-heading p-3 mb-3" + role="tab" + id="heading3" + > + <h3 className="panel-title"> + <a + className="collapsed" + role="button" + title="" + data-toggle="collapse" + data-parent="#accordion" + href="#collapse3" + aria-expanded="true" + aria-controls="collapse3" + > + 4.) How do I know if I am covered or exempt? + </a> + </h3> + </div> + <div + id="collapse3" + className="panel-collapse collapse" + role="tabpanel" + aria-labelledby="heading3" + > + <div className="panel-body px-3 mb-4"> + <p> + By registering and logging into this site, you can + fill out a questionnaire that will ask certain + questions regarding your farm and produce. Based on + your responses, it will determine whether or not you + are covered and/or exempt. + </p> + </div> </div> </div> </div> </div> - </div> - </section> - </div> + </section> + </div> </div> </div> ) diff --git a/src/components/Survey.js b/src/components/Survey.js index 4b8130396c067f0112e07cfe3e804aadec75dc05..a433896af67154fa595a54ef5a4f32f9d1af0ed2 100644 --- a/src/components/Survey.js +++ b/src/components/Survey.js @@ -1,17 +1,78 @@ import React, { Component } from 'react' -import './css/Survey.css' - import ReactDOM from 'react-dom' +import * as Surveyjs from "survey-react"; +import "survey-react/survey.css"; -export default class Home extends Component { - render() { - return ( - <div> - <div id="surveyContainer"> +export default class Survey extends Component { + surveyJSON = { + title: "Preventive Controls Rule Status", + pages: [ + { + name: "page1", + elements: [ + { + type: "boolean", + name: "question1", + title: "Do you manufacture, process, pack AND/OR hold any kind of food for human consumption?", + labelTrue: "Yes", + labelFalse: "No" + }, + { + type: "boolean", + name: "question3", + visibleIf: "{question1} = true", + title: "Do you only pack/hold food for human consumption on your farm?", + labelTrue: "Yes", + labelFalse: "No" + }, + { + type: "boolean", + name: "question4", + visibleIf: "{question3} = false or {question6} = true", + title: "I also process food: Dry/dehydrate, Label/package who unprocessed produce, and/or Treat whole produce to manipulate ripening.", + labelTrue: "Yes", + labelFalse: "No" + }, + { + type: "boolean", + name: "question5", + visibleIf: "{question3} = false", + title: "I also pack and hold off-farm.", + labelTrue: "Yes", + labelFalse: "No" + }, + { + type: "boolean", + name: "question6", + visibleIf: "{question5} = true", + title: "Is your off-farm packing operation majority owned by farmers who are providing the majority of the product packed and held there?", + labelTrue: "Yes", + labelFalse: "No" + }, + { + type: "html", + name: "question7", + visibleIf: "{question6} = false or {question4} = false", + html: "Part 2 Preventive Controls Rule" + }, + { + type: "html", + name: "question2", + visibleIf: "{question1} = false or {question3} = true or {question4} = true", + html: "NOT covered." + } + ] + } + ] + } - </div> + sendDataToServer(survey) { + var resultAsString = JSON.stringify(survey.data); + alert(resultAsString); //send Ajax request to your web server. + } - </div> - ) - } -} \ No newline at end of file + render() { + var model = new Surveyjs.Model(this.surveyJSON); + return (<div><Surveyjs.Survey model={model} onComplete={this.sendDataToServer}/></div>) + } +}