求助：在Google Web Stories WordPress插件中添加amp-story-interactive-quiz不显示

Google Web Stories WordPress插件未提供amp-story-interactive-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>

已添加的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>

1. 修正组件脚本的自定义元素声明 #

你引入的脚本声明的是custom-element="amp-story-interactive"，但实际使用的组件是<amp-story-interactive-quiz>，AMP无法匹配识别组件。需要将脚本的custom-element属性改为对应组件名：

<script async custom-element="amp-story-interactive-quiz" src="https://cdn.ampproject.org/v0/amp-story-interactive-quiz-0.1.js"></script>

2. 调整CSS字号设置 #

.center类中font-size: 0.23em的字号过小，会导致组件内容被缩至几乎不可见，建议修改为适配移动端的合理值：

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    font-size: 1.2em;
}

3. 清理重复属性与语法错误 #

amp-story-interactive-quiz中correct-option="3"和option-3-correct属性重复，保留其一即可；同时修正explanation-text前的空格，避免属性解析失败：

<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-confetti="⚽"
  option-4-text="Germany"
  correct-option="3"
  explanation-text="Uruguay won the first soccer world cup." >
</amp-story-interactive-quiz>

4. 用AMP验证工具排查问题 #

使用AMP官方验证工具扫描页面，可快速定位组件未识别、属性错误或脚本加载等隐藏规范冲突。

内容的提问来源于stack exchange，提问作者Amit Kumar Gupta