rahsheen · rahsheen · Mar 10, 2019 · Oct 27, 2018
diff --git a/demo2/README.md b/demo2/README.md
@@ -0,0 +1,13 @@
+# Demo for @rahsheen/react-wizard
+
+## Installation
+To install Wizard
+
+npm install @rahsheen/react-wizard 
+
+codesandbox requires dependencies to be manually installed
+
+### Dependencies
+- coveralls
+- codecove
+
diff --git a/demo2/package.json b/demo2/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "react-wizard-demo",
+  "version": "1.0.0",
+  "description": "a little Wizard quiz to demo react-wizard-demo",
+  "keywords": [
+    "react",
+    "wizard",
+    "demo"
+  ],
+  "main": "src/index.js",
+  "dependencies": {
+    "@rahsheen/react-wizard": "1.0.3",
+    "codecov": "3.1.0",
+    "coveralls": "3.0.2",
+    "normalize-css": "2.3.1",
+    "react": "16.5.2",
+    "react-dom": "16.5.2",
+    "react-scripts": "2.0.3"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/demo2/potter.json b/demo2/potter.json
@@ -0,0 +1,97 @@
+[
+  {
+    "clue": "When is Harry Potters birthday?",
+    "answers": {
+      "July 30, 1980": 0,
+      "July 31, 1981": 0,
+      "July 31, 1980": 1,
+      "July 30, 1981": 0
+      }
+  },
+  {
+    "clue":"What is Harry Potters middle name?",
+    "answers": {
+      "James": 1,
+      "Albus": 0,
+      "Sirius": 0,
+      "Peter": 0
+    }
+  },
+  {
+    "clue": "Select all that apply: Which of the following potions are believed to have been invented by the Potter family?",
+    "answers": {
+      "Pepperup Potion": 1,
+      "Polyjuice Potion": 0,
+      "Sleekeazy's Hair Potion": 1,
+      "Felix Felicis": 0,
+      "Skele-gro": 1
+
+    }
+  },
+  {
+    "clue":"How many birthday cakes did Harry receive when he turned 14?",
+    "answers": {
+      "4": 1,
+      "2": 0,
+      "3": 0,
+      "5": 0
+    }
+  },
+  {
+    "clue": "In which book does Harry find the name for his pet owl, Hedwig?",
+    "answers": {
+      "Hogwarts: A History": 0,
+      "A History of Magic": 1,
+      "The Dark Forces: A Guide to Self-Protection": 0,
+      "Fantastic Beasts and Where to Find Them": 0
+    }
+  },
+  {
+    "clue":"According to Lockhart's 'card-carrying Cupid', Harry's eyes are as green as...",
+    "answers": {
+      "An emerald-green cloak": 0,
+      "A freshly mown lawn": 0,
+      "A fresh pickled toad": 1,
+      "An Irish Spring morn": 0
+    }
+  },
+  {
+    "clue":"Which grade is Harry awarded for his History of Magic O.W.L. exam?",
+    "answers": {
+      "P": 0,
+      "A": 0,
+      "D": 1,
+      "E": 0
+    }
+  },
+  {
+    "clue":"Select all that apply: Which of the following injuries does Madam Pomfrey treat Harry for?",
+    "answers": {
+      "Skrewt burns": 0,
+      "Dragon bite": 0,
+      "Petrification": 0,
+      "Missing bones": 1,
+      "Stinging jinx": 0,
+      "Cracked skull": 1
+    }
+  },
+  {
+    "clue":"Which book does Harry think about to distract himself from Aunt Marge's insults?",
+    "answers": { 
+      "Quidditch Teams of Brittan and Ireland": 0,
+      "Quidditch Through the Ages": 0,
+      "Flying with the Cannons": 0,
+      "Handbook of Do-It-Yourself Broomcare": 1
+    }
+  },
+  {
+    "clue":"In which chapter does Harry learn that Sirius is his godfather?",
+    "answers": {
+      "The Marauder's Map": 1,
+      "Talons and Tea Leaves": 0,
+      "Grim Defeat": 0,
+      "Moony, Wormtail, Padfoot and Prongs": 0,
+      "Flight of the Fat Lady":0
+    }
+  }
+]
diff --git a/demo2/public/index.html b/demo2/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/demo2/src/WizardSteps/End.js b/demo2/src/WizardSteps/End.js
@@ -0,0 +1,35 @@
+import React from 'react'
+
+export default function Step4(props) {
+  let wrong = 2
+  let finalScore = ((10 - wrong) / 10) * 100
+  let message = final => {
+    switch (final) {
+      case 100:
+      case 90:
+      case 80:
+        return 'You know your Wizards!'
+        break
+      case 70:
+      case 60:
+        return 'Not bad, but not good either.'
+        break
+      case 50:
+        return "You really didn't know what this quiz was about, did you."
+        break
+      default:
+        return 'Thanks!'
+    }
+  }
+  return (
+    <div className="qContainer">
+      <img src={props.image} style={{ height: 200, width: 250, padding: 50 }} />
+      <p>Your Final score was {finalScore}%</p>
+      <p style={{ padding: 20 }}>{message(finalScore)}</p>
+      <div className="bContainer">
+        <button onClick={props.prevStep}>Back</button>
+        <button onClick={props.submit}>Finish</button>
+      </div>
+    </div>
+  )
+}
diff --git a/demo2/src/WizardSteps/MultiAnswer.js b/demo2/src/WizardSteps/MultiAnswer.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+
+export default class Step3 extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      somestatething: ''
+    }
+  }
+
+  componentWillMount() {
+    // todo
+  }
+  componentWillUnmount() {
+    // todo
+  }
+
+  render() {
+    let _answers = []
+    for (let key in this.props.quiz.answers) {
+      _answers.push(key)
+    }
+    return (
+      <div className="qContainer">
+        <img
+          src={this.props.image}
+          style={{ height: 200, width: 250, padding: 10 }}
+        />
+        <h3>{this.props.quiz.clue}</h3>
+
+        <div>
+          <ul>
+            {_answers.map((answer, i) => (
+              <li key={i}>
+                <input type="checkbox" value="false" />
+                <span style={{ marginLeft: '5px', marginTop: '-3px' }}>
+                  {answer}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="bContainer">
+          <button onClick={this.props.prevStep}>Back</button>
+          <button onClick={this.props.nextStep}>Next</button>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/demo2/src/WizardSteps/SingleAnswer.js b/demo2/src/WizardSteps/SingleAnswer.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+
+export default class Step3 extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      somestatething: ''
+    }
+  }
+
+  componentWillMount() {
+    // todo
+  }
+  componentWillUnmount() {
+    // todo
+  }
+
+  render() {
+    let _answers = []
+    for (let key in this.props.quiz.answers) {
+      _answers.push(key)
+    }
+    return (
+      <div className="qContainer">
+        <img
+          src={this.props.image}
+          style={{ height: 200, width: 250, padding: 10 }}
+        />
+        <h3>{this.props.quiz.clue}</h3>
+
+        <div>
+          <ul>
+            {_answers.map((answer, i) => (
+              <li key={i}>
+                <input type="radio" value="false" />
+                <span style={{ marginLeft: '5px', marginTop: '-3px' }}>
+                  {answer}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="bContainer">
+          <button onClick={this.props.prevStep}>Back</button>
+          <button onClick={this.props.nextStep}>Next</button>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/demo2/src/WizardSteps/Start.js b/demo2/src/WizardSteps/Start.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default function Start(props) {
+  return (
+    <div className="start">
+      <p>Test your knowledge!</p>
+      <img src={require('../assets/Hogwarts1.jpeg')} />
+      <button onClick={props.nextStep}>Start Quiz!</button>
+    </div>
+  )
+}
diff --git a/demo2/src/WizardSteps/Step2.js b/demo2/src/WizardSteps/Step2.js
@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function Step2(props) {
+  let _answers = []
+  for (let key in props.quiz.answers) {
+    _answers.push(key)
+  }
+  return (
+    <div className="qContainer">
+      <h3 style={{ width: '300px' }}>{props.quiz.clue}</h3>
+      <div>
+        <ul>{_answers.map((answer, i) => <li key={i}>{answer}</li>)}</ul>
+      </div>
+      <div className="bContainer">
+        <button onClick={props.prevStep}>Back</button>
+        <button onClick={props.nextStep}>Next</button>
+      </div>
+    </div>
+  )
+}