I sometimes use a Trivia app at the end of my talks as a replacement for the traditional summary slide, and we have also been using Trivia games as a fun activity at different Salesforce Developer events.
In this article, I share a React version of the Trivia application. The app was written with React and ES6 (ES2015), and was built with Babel and Webpack.
Check out a hosted version here: https://ccoenraets.github.io/react-trivia/
Make It Your Own
The questions in the example above are just placeholders. It’s easy to create your own questions:
- Click here to download the app
- Modify data.js with your own questions. The questions are loaded this way so you can easily load index.html from the local file system (using the file:// protocol) without running into XHR cross-origin issues. See the commented out componentDidMount in app.js for an alternative XHR implementation.
- Open index.html. You can just double-click index.html on your local file system: no need for a web server.
Source Code and Build Instructions
The source code is available in this repository if you want to modify the app and create your own build:
1 - Clone the repo
git clone https://github.com/ccoenraets/react-trivia2 - Install dependencies
npm install3 - Modify the app in the /js folder
4 - Build the app
npm run webpack Credits
Initially inspired by Ember Jeopardy.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}