Skip to content
A dynamic quiz template built on React
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
package-lock.json
package.json

README.md

React Quiz Application Template

Easily put together a quiz and customize it through 1 json file

See running example at: limitless-reef-93222.herokuapp.com/

Documentation

Customization

Customize the template through ./src/config.json

{
  "title":  "The Planet Express Quiz",
  "titleColor":  "#333",
  "quizLogo":  "planet-express.png",
  "subtext":  "Welcome to the Quiz. ",
  "subtext2":  "Try to get as many questions right as you can.",
  "subtextColor":  "#000",
  "startButtonText":  "Get Started",
  "backgroundImage":  "background.jpg",
  "containerColor":  "#fff",
  "containerAccentColor":  "#eaeaea",
  "buttonColor":  "#e74c3c",
  "buttonHoverColor":  "#e56357",
  "buttonTextColor":  "#fff",
  "quizTextColor":  "#000",
  "questionScoreCorrectColor":  "#2ecc71",
  "questionScoreIncorrectColor":  "#e74c3c",
  "questionScoreWarningColor":  "#ff9f43",
  "submitText":  "Submit",
  "nextButtonText":  "Next Question",
  "correctAnswerText":  "Correct!",
  "incorrectAnswerText":  "Incorrect, the correct answer was:",
  "questionNotAnsweredText":  "Doh! you forgot to choose an answer.",
  "resultsHeader":  "Results",
  "congratsGif":  "congrats.gif",
  "startOverButtonText":  "Start Over",
  "questions":  [{
    "body":  "In 'Space Pilot 3000' who is the first main character that Fry meets?",
    "img":  "http://slurmed.com/fgrabs/01acv01/01acv01_019.jpg",
    "answers":  ["Zoidberg",  "Leela",  "Bender",  "Professor Hubert J. Farnsworth"],
    "correctAnswerIndex":  1
  },
  {
    "body":  "In 'The Series Has Landed' what was the name of the amusement park on the moon?",
    "img":  "http://images2.fanpop.com/images/photos/7300000/Futurama-1x02-The-Series-Has-Landed-futurama-7312946-500-333.jpg",
    "answers":  ["Lunar Park",  "Mars University",  "Wong Ranch",  "Moon Spacefun"],
    "correctAnswerIndex":  0
  },
  {
    "body":  "In 'When Aliens Attack' what planet are the aliens from?",
    "img":  "http://slurmed.com/fgrabs/01acv12/01acv12_045.jpg",
    "answers":  ["Omicron Persia 11",  "Omicron Persia 8",  "Mars",  "Amazonia"],
    "correctAnswerIndex":  1
  },
  {
    "body":  "In 'Hell Is Other Robots' where was robot hell?",
    "img":  "https://horrorpediadotcom.files.wordpress.com/2014/04/robot-hell.png",
    "answers":  ["Utah",  "Alabama",  "Texas",  "New Jersey"],
    "correctAnswerIndex":  3
  },
  {
    "body":  "In 'Fear of Bot Planet' what fake religious robot holiday did Bender make up?",
    "img":  "http://images2.fanpop.com/image/photos/12400000/1x05-Fear-of-a-Bot-Planet-futurama-12425237-500-375.jpg",
    "answers":  ["Bot-Mitvah",  "Robanza",  "Robonukah",  "Robotisam"],
    "correctAnswerIndex":  2
  }]
}

Image Assets

Image assets should be stored in the ./public folder for the application to work correctly. Then inside of ./src/config.json you reference them by just the filename and extension:

...
"quizLogo": "planet-express.png"
...
"backgroundImage":  "background.jpg",
...
"congratsGif": "congrats.gif"
...

Note

  • Currently the value for site title is hard-coded so you must change it in ./public/index.html
You can’t perform that action at this time.