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

->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>


但是我在浏览器中得到空选择输入。请提出这方面的最佳解决方案?

javascript - 设置测验系统-LMLPHP

注意:

我注意到,如果我添加

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


到我的QuestionType,我在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'
        ));
    }
}

最佳答案

1-如果您的目标只是在Choice表单中选择现有的Answers,则必须在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-但是,如果要在“选择”表单中添加新答案,则必须保持CollectionTypeField不变。

然后,在您的树枝模板中,呈现“选择”表单时,您可以像这样调用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示例(您只需要对此进行调整即可):

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);
    });
});

关于javascript - 设置测验系统,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38717821/

10-09 15:00
查看更多