javascript - 设置测验系统

Question

我正在开发一个基于多选题的测验系统，我的目标是帮助老师在同一页面上为该问题添加新问题和选项。根据 Symfony 文档，我可以嵌入 Collection of Forms ，所以我尝试将 ChoiceType 嵌入到问题表单中:

->add('answers', CollectionType::class, array(
    'entry_type'   => ChoiceType::class,
    'allow_add'    => true,
));
        ;  

new.html.twig页面代码(新题):

<label> Choose answers : </label>
<ul class="tags" data-prototype="{{form_widget(form.answers.vars.prototype)|e('html_attr') }}">
</ul>

但我在浏览器中的选择输入为空。请建议在这方面什么是完美的解决方案？

注意事项:

我注意到如果我添加

use Symfony\Component\Form\Extension\Core\Type\ChoiceType; 

对于我的问题类型，我在 new.html.twig 中得到了一个空选择的表单

当我删除这个导入时，如果我打开 new.html.twig 会出现这个错误:

 Variable "expanded" does not exist in form_div_layout.html.twig at line 38

但我的实体中没有任何名为“扩展”的变量

选择实体

class Choice
{
    ...

    /**
     * @var string
     *
     * @ORM\Column(name="answer", type="text")
     */
    private $answer;

    /**
     * @var string
     *
     * @ORM\Column(name="correct", type="string", length=255)
     */
    private $correct;


    /**
     * @var
     * @ORM\ManyToOne(targetEntity="ChallengeBundle\Entity\Question",inversedBy="answers")
     */
    private $question;

...
}

问题实体:

class Question
{
    ...

    /**
     * @var
     * @ORM\OneToMany(targetEntity="ChallengeBundle\Entity\Choice",mappedBy="question",cascade={"remove"})
     */
    private $answers;

...
}

选择类型:

class ChoiceType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('answer')
            ->add('correct')

        ;
    }
    
    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'ChallengeBundle\Entity\Choice'
        ));
    }
} 

Answer 1

1- 如果您的目标只是选择 Choice 表单中的现有答案，您必须在 ChoiceFormType 中使用 EntityTypeField 而不是 CollectionTypeField :

->add('answers', EntityType::class, array(
    // query choices from this entity
    'class' => 'YourBundle:Question',

    // use the Question.name property as the visible option string
    'choice_label' => 'name',

   // used to render a select box, check boxes or radios
   // 'multiple' => true,
   // 'expanded' => true,
)); 

2- 但是，如果您想在 Choice 表单中添加新答案，则必须像您一样保留 CollectionTypeField。

然后在你的 Twig 模板中，当你呈现你的 Choice 表单时，你可以像这样调用你的 Answer 集合:

<ul class="answers" data-prototype="{{ form_widget(form.answers.vars.prototype)|e('html_attr') }}">
     {% for answer in form.answers %}
          <li>{{ form_row(answer.answer) }}</li>
          <li>{{ form_row(answer.correct) }}</li>
     {% endfor %}
</ul>

这将显示第一个输入为空

最后，作为documentation说，你必须添加一些 javascript 来读取 data-prototype 属性中的 html，并在你单击“添加新答案”链接时动态添加新的答案表单。

Doc example (you just have to adapt this to your case) :

var $collectionHolder;

// setup an "add a tag" link
var $addTagLink = $('<a href="#" class="add_tag_link">Add a tag</a>');
var $newLinkLi = $('<li></li>').append($addTagLink);

jQuery(document).ready(function() {
    // Get the ul that holds the collection of tags
    $collectionHolder = $('ul.tags');

    // add the "add a tag" anchor and li to the tags ul
    $collectionHolder.append($newLinkLi);

    // count the current form inputs we have (e.g. 2), use that as the new
    // index when inserting a new item (e.g. 2)
    $collectionHolder.data('index', $collectionHolder.find(':input').length);

    $addTagLink.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();

        // add a new tag form (see next code block)
        addTagForm($collectionHolder, $newLinkLi);
    });
});