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