How to use amp-story-interactive-quiz in Google web stories Wordpress plugin

Question

As there is no option available in Google web stories WordPress plugin to add amp-story-interactive-quiz, I'm trying to add a page manually with following code. The page appears but not the quiz.

<amp-story-page id="page-quiz-1" auto-advance-after="7s" class="i-amphtml-layout-container" i-amphtml-layout="container">
    <amp-story-grid-layer template="vertical" aspect-ratio="412:618" class="grid-layer i-amphtml-layout-container" i-amphtml-layout="container" style="--aspect-ratio:412/618;">
        <div class="_d81be3e page-fullbleed-area">
            <div class="page-safe-area">
                <div class="_6120891">
                    <div class="_89d52dd mask" id="el-308cf719-9b44-4c9e-904e-13145bbbdc61">
                        <div data-leaf-element="true" class="_1ef959d">
                            <amp-img layout="fill" src="https://images.unsplash.com/photo-1580582932707-520aed937b7b?ixid=MnwxMzcxOTN8MHwxfHNlYXJjaHwzfHxleGFtfGVufDB8fHx8MTY4MTM4MTM4OA&amp;ixlib=rb-4.0.3&amp;fm=jpg&amp;w=4668&amp;h=2626&amp;fit=max" alt="brown wooden table and chairs"  sizes="(min-width: 1024px) 143vh, 317vw" disable-inline-width="true" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
                        </div>
                        <div class="_f0c8e08 element-overlay-area"></div>
                    </div>
                </div>
            </div>
        </div>
    </amp-story-grid-layer>
    <amp-story-grid-layer template="fill" aspect-ratio="412:618"
        class="grid-layer i-amphtml-layout-container" i-amphtml-layout="container" style="--aspect-ratio:412/618;">
        <div class="_d81be3e page-fullbleed-area">
            <div class="page-safe-area">
        <amp-story-interactive-quiz
          id="quiz-1" class="center"
          prompt-text="Who won the first soccer world cup?"
          endpoint="https://amp.dev/documentation/examples/components/amp-story-interactive-poll/results"
          prompt-size="large" chip-style="transparent"
          option-1-text="Spain"
          option-2-text="Brazil"
          option-3-text="Uruguay" option-3-correct option-3-confetti="⚽"
          option-4-text="Germany"
          correct-option="3"
        explanation-text="Uruguay won the first soccer world cup." >
        </amp-story-interactive-quiz>
      </div>
      </div>
    </amp-story-grid-layer>
  </amp-story-page>

I have already added following code in head

<script async custom-element="amp-story-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
<style amp-custom>
    .center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 22em;
        font-size: 0.23em;
    }
    #quiz-1 {
        --interactive-prompt-text-color: rgb(112, 238, 96);
        --interactive-accent-color: green;
    }
</style>

Answer 1

I would recommend checking the documentation & examples there to see if you've missed something.

Then, I'd recommend testing in AMP playground or on a static web story to see if it works there. This way you can identify whether it's an issue with your quiz code or how you've added it to the plugin.

If the quiz is not appearing when adding it to the plugin's output, it might be that the AMP sanitization logic in the plugin has removed some of your code because it's invalid AMP.

As a starting point, here's how I've added an interactive quiz component to a story coming from the plugin in the past:

add_action(
'init',
static function() {
    if ( ! class_exists( '\Google\Web_Stories_Dependencies\AMP_Base_Sanitizer' ) ) {
        return;
    }

    add_filter(
        'web_stories_amp_sanitizers',
        static function( $sanitizers ) {
            $sanitizers[ \Gorilla\Web_Stories\AMP_Sanitizer::class ] = [];

            return $sanitizers;
        }
    );

    class AMP_Sanitizer extends \Google\Web_Stories_Dependencies\AMP_Base_Sanitizer {
        /**
         * Sanitize the HTML contained in the DOMDocument received by the constructor.
         */
        public function sanitize(): void {
            // Insert a quiz on page 2 of every story.

            $page_2 = $this->dom->body->getElementsByTagName( 'amp-story-page' )->item( 1 );

            if ( $page_2 instanceof \DOMElement) {
                $page_2_grid_layer = $this->dom->createElement('amp-story-grid-layer');
                $page_2_grid_layer->setAttribute('template', 'vertical');
                $page_2_grid_layer->setAttribute('aspect-ratio', '412:618');
                $page_2_grid_layer->setAttribute('class', 'grid-layer');
                $page_2_poll = $this->dom->createElement('amp-story-interactive-binary-poll');
                $page_2_poll->setAttribute('endpoint','your endpoint');
                $page_2_poll->setAttribute('id','your id');
                $page_2_poll->setAttribute('option-1-text','Yes');
                $page_2_poll->setAttribute('option-2-text','No');
                $page_2_poll->setAttribute('prompt-text','What do you think?');
                $page_2_grid_layer->appendChild($page_2_poll);

                $page_2->appendChild($page_2_grid_layer);
            }
        }
    }

}
);