我正在开发基于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>
但是我在浏览器中得到空选择输入。请提出这方面的最佳解决方案?
注意:
我注意到,如果我添加
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/