Loading…
console.log("app has loaded");
// LP Component class LandingPage extends React.Component{
constructor(props){ super(props); }
render(){ return(
); } }
//Quiz Component class QuizPage extends React.Component{
constructor(props){ super(props); }
render(){ return(

How Green Are You?
Find out the size of your carbon footprint!
Take the Student Conservation Association's simple quiz below to see what kind of impact you're having on our planet.
{this.props.quizProgress}/{this.props.questions.length}
{
this.props.questions.map(question => {
if(question.id == this.props.quizProgress){
return
{!this.props.quizDone && }
{this.props.quizDone &&
); } }
//Single Question Component
let currentClass;
class Question extends React.Component{
constructor(props){ super(props); }
_onChange(e){ //Pass Data Element to the scoring function const {_setScore} = this.props; _setScore(e.target.value); }
_onClickLabel(e){ //Remove class from previous clicked button if(currentClass){ currentClass.className = "inactive"; }
//Add class to current clicked button currentClass = e.currentTarget; currentClass.className = "active"; }
render(){
return(
{this.props.question.headline}
{this.props.question.subtext}
{this.props.question.secondHeadline}
); } }
//Email Capture Component
class EmailForm extends React.Component{
constructor(props){ super(props); }
render(){
return(
You are done!
Ready to see and share your results?
); } }
//Thank You Component class ThankYou extends React.Component{
constructor(props){ super(props); }
render(){
let winner; let winnerMessage; let winnerBody;
if(this.props.winner == 'a'){ winner =
Super Green
; winnerMessage =
You are the poster child of conservation, so congratulations for what you're doing to minimize your carbon footprint.
; winnerBody =
Through your conscientious choices, you're helping and not hurting the environment. Keep up the good work, and be sure to encourage your friends to do the same when it comes to conserving and protecting our natural resources.
;
} else if(this.props.winner == 'b'){ winner =
Sort of Green
; winnerMessage =
You're the Goldilocks of conservation with a carbon footprint that's not too big and not too small.
; winnerBody =
While you’re trying to help make a difference when you can, there’s more you can do. By educating yourself, you can learn how to make a more tangible impact in the world around you. Knowledge is power!
;
} else if(this.props.winner == 'c'){ winner =
Not so Green
; winnerMessage =
Your carbon footprint is getting a little too big for its britches.
; winnerBody =
But despite that, there's good news. You can become greener! And it doesn't have to be an overwhelming process. By making small changes in your lifestyle choices -– one day at a time -- you can become greener.
; }
return(

QUIZ RESULTS:
Here's How Green You Are...
Thanks for taking the Student Conservation Association's "How Green Are You?" Quiz.
Check out your results...

No matter your green level or age, you can always do your part to help reduce carbon footprints in our world.
What's more, you can also help The Student Conservation Association (SCA) continue the work of serving our planet and helping build the next generation of conservation leaders.
Each year we motivate and deploy thousands of young people (age 15 to young adults) from all 50 states and socio-economic backgrounds who care passionately about improving their natural world.
You can help our SCA members make a difference across the United States as they continue protecting, enhancing, and restoring:
- National parks
- Marine sanctuaries
- Cultural landmarks
- Urban green spaces

FOOD & BEVERAGES
- Shop local -- as close to your neighborhood -- whenever possible. When you buy your food from local food growers at farm stands or outdoor food markets, you ensure a smaller carbon footprint since the food has a shorter distance to get from its source to you.
- Plan out your meals for at least 5 days at a time, and try to make ingredients work for more than one meal. If you’re making rice as a side dish for one meal, you can use the leftover rice when making burritos or stir-fry the next day.
- Instead of buying sodas in cans or plastic liter bottles, give H20 another shot! Add slices of lemon or sprigs of fresh mint to give your water some extra flavor.
RECYCLING & HOME
- Keep a separate bin for recyclables right next to your indoor garbage can. The visual reminder will help you make good choices when throwing out trash each day.
- Plastic food storage containers can be washed out and reused over and over again. And if you’re really serious, so can plastic, zip-top storage bags!
- Bring your own canvas or reusable bags with you to the store. By not using the plastic shopping bags that many retailers provide, you help decrease the output of non-biodegradable materials into the environment.
- Consider going paperless when it comes to your monthly bill-paying and shopping needs. You can receive your receipts and bills electronically and help reduce the amount of trees being harvested at the same time.
TRANSPORTATION
- No car, no problem! Whether you hop on your bicycle, you can help reduce carbon emissions while getting some great physical exercise.
- Group your errands into one day a week. Plan out your route and try to keep your destinations as close together as possible.
- Consider a more fuel-efficient alternative. For those of you who must use a vehicle to get around, consider swapping out your gas guzzler for a fuel-efficient hybrid or electric car. Efficiency will both lower your fuel expenses and reduce your carbon footprint!
); } }
//Main App Component class App extends React.Component{ constructor(props){ super(props);
this.state = { mainProgress: 2, quizProgress: 1, answerGiven: '', selectA: 0, selectB: 0, selectC: 0, quizDone: false, winner: 'a', questions: [ { id:1, headline: 'How long do you typically stay in the shower?', subtext: '', secondHeadline: '', currentAnswer: 'X', choices: [ { id: "A", text: "I'll stay until the hot water starts turning cold.", value: "a", }, { id: "B", text: "I get all of the necessary parts washed as fast as I can, and then I'm done.", value: "b", }, { id: "C", text: "I keep the water as cold as I can stand it, and I'm in and out in under 5 minutes.", value: "c", } ] }, { id:2, headline: 'When purchasing toiletry products', subtext: '(hairspray, deodorant, etc.)', secondHeadline: 'I try to...', currentAnswer: 'Y', choices: [ { id: "A", text: "Buy whatever looks the coolest or promises me the best results.", value: "a", }, { id: "B", text: "Steer clear of aerosol cans, since they can be hazardous waste if left unused.", value: "b", }, { id: "C", text: "Read the labels and only choose items that don't contain toxic ingredients.", value: "c", } ] }, { id:3, headline: 'How often do you recycle?', subtext: '', secondHeadline: '', currentAnswer: 'Y', choices: [ { id: "A", text: "Pretty much never. I just don't remember.", value: "a", }, { id: "B", text: "About once a month I take my paper waste to the recycling bin.", value: "b", }, { id: "C", text: "Every day. I'm very conscious about what I'm throwing out.", value: "c", } ] }, { id:4, headline: 'How often do you recycle?', subtext: '', secondHeadline: '', currentAnswer: 'Y', choices: [ { id: "A", text: "Pretty much never. I just don't remember.", value: "a", }, { id: "B", text: "About once a month I take my paper waste to the recycling bin.", value: "b", }, { id: "C", text: "Every day. I'm very conscious about what I'm throwing out.", value: "c", } ] }, { id:5, headline: 'How often do you recycle?', subtext: '', secondHeadline: '', currentAnswer: 'Y', choices: [ { id: "A", text: "Pretty much never. I just don't remember.", value: "a", }, { id: "B", text: "About once a month I take my paper waste to the recycling bin.", value: "b", }, { id: "C", text: "Every day. I'm very conscious about what I'm throwing out.", value: "c", } ] }, { id:6, headline: 'How often do you recycle?', subtext: '', secondHeadline: '', currentAnswer: 'Y', choices: [ { id: "A", text: "Pretty much never. I just don't remember.", value: "a", }, { id: "B", text: "About once a month I take my paper waste to the recycling bin.", value: "b", }, { id: "C", text: "Every day. I'm very conscious about what I'm throwing out.", value: "c", } ] }, { id:7, headline: 'How often do you recycle?', subtext: '', secondHeadline: '', currentAnswer: 'Y', choices: [ { id: "A", text: "Pretty much never. I just don't remember.", value: "a", }, { id: "B", text: "About once a month I take my paper waste to the recycling bin.", value: "b", }, { id: "C", text: "Every day. I'm very conscious about what I'm throwing out.", value: "c", } ] }, { id:8, headline: 'How often do you recycle?', subtext: '', secondHeadline: '', currentAnswer: 'Y', choices: [ { id: "A", text: "Pretty much never. I just don't remember.", value: "a", }, { id: "B", text: "About once a month I take my paper waste to the recycling bin.", value: "b", }, { id: "C", text: "Every day. I'm very conscious about what I'm throwing out.", value: "c", } ] }
] }; }
_progress(){ this.setState({mainProgress: this.state.mainProgress + 1}); }
_setScore(score){ this.setState({answerGiven: score}); }
_setQuizProgressNext(){
document.getElementById('QuizStart').scrollIntoView();
if(this.state.quizProgress < this.state.questions.length){ this.setState({quizProgress: this.state.quizProgress + 1}); if(this.state.answerGiven == 'a'){ this.setState({selectA: this.state.selectA + 1}); } else if(this.state.answerGiven == 'b'){ this.setState({selectB: this.state.selectB + 1}); } else if(this.state.answerGiven == 'c'){ this.setState({selectC: this.state.selectC + 1}); } this.setState({answerGiven: ''}); } else { this.setState({quizDone: true}); if(this.state.selectA > this.state.selectB && this.state.selectA > this.state.selectC){ this.setState({winner: 'a'}); } else if (this.state.selectB > this.state.selectA && this.state.selectB > this.state.selectC){ this.setState({winner: 'b'}); } else if (this.state.selectC > this.state.selectA && this.state.selectC > this.state.selectB){ this.setState({winner: 'c'}); } else{ this.setState({winner: 'b'}); } } }
_setQuizProgressPrevious(){ if(this.state.quizProgress > 1){ this.setState({quizProgress: this.state.quizProgress - 1}); } }
render(){ return(
); } }
ReactDOM.render(