Quiz Presentation App

In the current climate, online quizzery has taken off and if you’re anything like me you will have attended more online quizzes in the last 12 months than you have in the whole of your life previously. Many of these quizzes have been impeccably presented affairs, epic powerpoint slideshows deftly navigated by the quiz master. Unfortunately these extravagant productions also highlight the gulf between the more hastily assembled presentations and breed a certain level of expectation among participants.

Last time it was my turn to be quiz master I decided to code a little React App that I could feed a object of questions and would then display them for me. It was a fun project and I managed to put together a working prototype over the course of a few hours a couple of weekends ago.

The project is now on github. It’s not finished lol! There’s a few minor bugs and a couple of people made suggestions at it’s debut which I am considering implementing. If you would like to use the quiz follow the following steps:

1. Download from GitHub.
2. Edit src/components/QuizDashboard.js and update the Title & Date on line 77 & 78
3. Add your questions, answers & images to src/Questions.js. Each array you export from Questions.js will be a round, which you will need to setup next.
4. Setup rounds by going back to src/components/QuizDashboard.js. Firstly add the name of your round to the import statement at line 2, remove rounds no longer exported from Questions.js and next update the array at line 8 called rounds. The fields value is the name of the array variable exported from Questions.js, flag represents the round number and label is the text to show in the menu to toggle between rounds.
5. Run ‘yarn start’ to compile your quiz, now you can present it at your next online quiz (pro tip: Hit F11 for a full screen experience)

Example Questions array (Questions.js)

export const RoundOne = [{ 
     q: 'Geography Question 1',
     a: 'Geography Answer 1',
    img: {
        src: 'http://placekitten.com/200/300',
        showOnAnswer: true
    }
}, {
     q: 'Geography Question 2',
     a: 'Geography Answer 2',
    img: {
        src: 'http://placekitten.com/200/300',
        showOnAnswer: false
    }
}]

export const RoundTwo = [{ 
     q: 'Question 1',
     a: 'Answer 1',
    img: {
        src: 'http://placekitten.com/200/300',
        showOnAnswer: true
    }
}, {
     q: 'Question 2',
     a: 'Answer 2',
    img: {
        src: 'http://placekitten.com/200/300',
        showOnAnswer: false
    }
}]

Example round setup (QuizDashboard.js)

import { RoundOne, RoundTwo } from '../Questions'

    rounds = [
        { label: 'Geography', flag: 0, fields: RoundOne },
        { label: 'General Knowledge', flag: 1, fields: RoundTwo }
    ]