Gutenberg React Quiz Plugin

Gutenberg based Quiz Plugin. Use Gutenberg to build your quiz, use Gutenberg to display your quiz.

React powers it all.

Overview

There is currently 2 React Apps.

• 1 is Gutenberg, so gutes-dev and gutes-build build and run those React components
• 2 is the QuizApp React App which runs on the front end.

Installation

• Clone
• Run composer install
• Run npm run build
• Run npm run gutes-build

REQUIRES

• Gutenberg
• My Gutenberg Object Plugin

Instructions

• Creating a new Quiz (CPT)
• Use Gutenberg to add questions
• Go to a post or page running Gutenberg, use the Quiz Block to add the quiz

Question Types

• Multiple Choice text choices
• Single Text - you set all the possible correct answers
• "YouTube Pause n' Ask" - embed a video, and pause at second and ask text or multiple choice
  • Demo

JavaScript Hooks

There are a number of wp.hooks I've implemented, and will be adding more as I go

Example

function my_title( title, quiz_result ) {
    if ( 100 === quiz_result ) {
        return 'PERFECT SCORE!';
    }
}
wp.hooks.addFilter( 'reactQuiz_complete_message_title', 'my_title', 10 );

Filters

Gutenberg

• reactQuiz_gutes_questions - array of block data
  • allBlocks - array of blocks (questions)

Quiz App

• __reactQuiz_load_question_component__ - select which component loads
  • returnComp - component to return
  • question - question (block name) being loaded
• __reactQuiz_quiz_final_state__ - runs when quiz is completed
  • final_state - object to pass into setState on quiz completion
• __reactQuiz_complete_message_title__ - title for complete message
  • title - current title
  • quiz_result - number representing % of correct answers
• reactQuiz_complete_message - message for complete message
  • message - current message
  • quiz_result - number representing % of correct answers

Actions

Quiz App

• __reactQuiz_complete_react_quiz__ - fires when quiz completed
  • state - the whole state of the Quiz App

TODO

Question Types To Add

• Video Embed w/ multiple choice
• Multiple Choice - each choice an image
• Textarea
• Flip Single Text Question so you put in all incorrect answers

Extendability

• Add in hook to add more question types (filterable array?)
• Create more actions that run (after question answered, after all questions answered, etc.)