README

一个PHP库，用于将HTML转换为交互式填空题形式。

现有MCMS站点的安装

文件安装

将 src/ 目录的全部内容复制到站点的新的文件夹中：_components/interactive_notes/（包含类和 assets 文件夹）

站点实现

在您将实现交互式笔记的 mcms_* 页面中，确保您已经有了带有 interactivenote 内容的讲道/直播详情。以下代码供您参考

$interactive_note = getContent(
    "sermon",
    "display:auto",
    "show_detail:__interactivenote__",
    "noecho"
);

require_once($_SERVER["DOCUMENT_ROOT"] . "/_components/interactive_notes/InteractiveNote.php");
$notes = new MonkDev\InteractiveNote\InteractiveNote(file_get_contents($interactive_note));

if( !empty($interactive_note) ) {
    $notes->setSingleInputTemplate("<input name='single-line[]' class='blank form-control single-line' data-answer='__ANSWER__' type='text'>");
    $notes->setFreeFormTemplate("<textarea name='free-form[]' class='pnoteText form-control free-form w-100' cols='30' rows='10' data-answer='__ANSWER__' placeholder='__ANSWER__'></textarea>");
    $notes->setCorrectAnswerClass('is-valid');
    $notes->setWrongAnswerClass('is-invalid');
    $notes->disableAutoWidth();
}

将笔记放入页面中。使用类似以下内容，匹配页面的样式，但请保留按钮上的 autofill、clearnotes 和 saveAsPdf 类

<?php if( !empty($notes->parse() ) : ?>
<div class="row">
    <div class="col-md-8 offset-2 my-5">
        <h1 id="notes-title">Notes</h1>
        <div>
            <form id="notes" class="form-inline">
                <?= $notes->parse(); ?>
            </form>
            <button href="javascript:void(0);" class="autofill btn btn-outline-secondary">Fill in the answers for me</button>
            <button href="javascript:void(0);" class="clearnotes btn btn-outline-secondary">Start Over</button>
            <button href="javascript:void(0);" class="saveAsPdf btn btn-outline-secondary">Save as PDF</button>
        </div>
    </div>
</div>
<?php endif; ?>

在 _components/scripts.php 包含之后，您需要添加以下内容以使UI工作
```
<?= $notes->getCssSnippet(); ?>
<?= $notes->getJavascriptSnippet(); ?>
```

monkdev / mcms-interactive-note-php

维护者

详细信息

README

现有MCMS站点的安装

文件安装

站点实现