0

我想将问题类型添加到基于 Limesurvey 的调查中。它用于标准的类似乌鸦的智商测试，我希望用户能够单击图片区域上的正确选择，而不是单击下面的单选按钮。

我有一个以独立方式工作的 JQuery maphighlight 片段（链接），但我想知道如何最好地将它集成到 Limesurvey 中？

关于 Limesurvey 问题插件的文档似乎很少，但据我所知，它们主要用于您需要自定义数据库条目时。为此，答案仍然只是 1-8 的数字，所以我应该能够在前端只使用一些 Javascript。但是，考虑到我有大约 60 个这样的问题，将它添加到中心位置是有意义的。

谁能指出我正确的大方向？

4

3 回答 3

1

如果您想使用示例中的图像和地图区域...

1) 使用与您的地图区域（A、B、C...）的 ID 匹配的答案代码创建一个列表无线电问题。

2) 将您的图像和地图插入到 list-radio 问题源中。

3）将此脚本添加到问题源中。该脚本将查找并单击 ID 以区域 ID 结尾的无线电输入。

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){ $('area').click(function(event){ event.preventDefault(); var qID = '{QID}'; var thisID = $(this).attr('id'); $('input.radio[id$="X'+qID+thisID+'"]').click(); }); }); </script>

于 2014-03-01T16:48:23.073 回答
0

为什么要尝试制作新的问题类型？

你可以很容易地在 javascript 中做谁。选择一个选项（列表单选），然后使用脚本。

一些 SVG 的示例：

Choose your favorite color<br />
<script type="text/javascript">
$(document).ready(function() {
        $('#question{QID} .answers-list').hide(); //uncomment to hide radio button
    $("path").click(function() {
        if ($(this).attr('id') != "selected")
                {
                        $("[name={SGQ}]").filter("[value='"+$(this).attr('id')+"']").attr("checked",true);
        $("#selected").css('fill',$(this).css('fill'));
                         $("[name={SGQ}]").filter("[value='"+$(this).attr('id')+"']").trigger('click');
                }
        else
                {
            $("#selected").css('fill','none');
                        $("[name={SGQ}]").attr("checked",false);
                        $("[name={SGQ}]").filter("[value='']").trigger('click');
                }
    });
});
</script>
<center><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="150" height="150" style="margin-left:25px">
  <path
     d="M 73.21875,0.03125 A 74.999999,74.999999 0 0 0 37.5,10.0625 l 18.75,32.5 a 37.5,37.5 0 0 1 37.5,-0.03125 L 112.5,10.0625 A 74.999999,74.999999 0 0 0 73.21875,0.03125 z"
     id="C1"
     style="fill:#008000;fillla date au format  traduction-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="M 112.5,10.0625 93.75,42.53125 A 37.5,37.5 0 0 1 112.5,75 L 150,75 A 74.999999,74.999999 0 0 0 112.5,10.0625 z"
     id="C2"
     style="fill:#ffff00;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m 112.5,75 a 37.5,37.5 0 0 1 -18.75,32.4375 l 18.75,32.5 A 74.999999,74.999999 0 0 0 150,75 l -37.5,0 z"
     id="C3"
     style="fill:#ff8000;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m 93.75,107.4375 a 37.5,37.5 0 0 1 -37.5,0.0312 L 37.5,139.9375 a 74.999999,74.999999 0 0 0 75,0 l -18.75,-32.5 z"
     id="C4"
     style="fill:#ff0000;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m 0,75 a 74.999999,74.999999 0 0 0 37.5,64.9375 L 56.25,107.46875 A 37.5,37.5 0 0 1 37.5,75 L 0,75 z"
     id="C5"
     style="fill:#800080;fillla date au format  traduction-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="M 37.5,10.0625 A 74.999999,74.999999 0 0 0 0,75 l 37.5,0 A 37.5,37.5 0 0 1 56.25,42.5625 l -18.75,-32.5 z"
     id="C6"
     style="fill:#0000ff;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m -182.40128,-1.5888613 a 48.619156,48.619156 0 1 1 -97.23831,0 48.619156,48.619156 0 1 1 97.23831,0 z"
     transform="matrix(0.23653228,0,0,0.23653228,129.64379,75.375816)"
     id="selected"
     style="fill:none;stroke:#000000;stroke-width:8.45550537;stroke-miterlimit:4;stroke-dasharray:none" />
</svg> </center>

但是用地图更容易。您可以使用 alt 属性或 id 属性来链接地图和答案。

示例取自 LimeSUrvey 手册

于 2014-03-01T10:32:11.197 回答
0

谢谢你。这些建议真的很有帮助。但是 - 我还想补充一件事。由于它是我需要重复 60 次的问题类型，因此不单独为每个问题重复它似乎是合乎逻辑的。值得庆幸的是，这也可以通过我发现的模板来实现。

最终解决方案基本遵循tpartner给出的建议。我需要将以下代码放入 template.js

$(document).ready(function(){
  var marbel_map = '<map name="$NAME"><area coords="340,100,425,186" data-maphilight="{" href="#" id="1" shape="rect" /> <area coords="340,195,425,283" data-maphilight="{" href="#" id="5" shape="rect" /> <area coords="437,100,522,186" data-maphilight="{" href="#" id="2" shape="rect" /> <area coords="437,195,522,283" data-maphilight="{" href="#" id="6" shape="rect" /> <area coords="535,100,620,186" data-maphilight="{" href="#" id="3" shape="rect" /> <area coords="535,195,620,283" data-maphilight="{" href="#" id="7" shape="rect" /> <area coords="632,100,717,186" data-maphilight="{" href="#" id="4" shape="rect" /> <area coords="632,195,717,283" data-maphilight="{" href="#" id="8" shape="rect" /></map>';
  $('.marbel').each(function(ind,el) {
      $(marbel_map.replace(/id=["']([^"']*)["']/g,"id='"+el.getAttribute('qid')+"$1'")
                                .replace(/\$NAME/g,el.getAttribute('qid')+'_map')).insertBefore(el);
      $(el).attr("usemap",'#'+el.getAttribute('qid')+'_map').maphilight();
      $(el).closest(".question-wrapper").find('.answers-list:first').hide();
    });

   $('area').click(function(){
      $(this).data('maphilight', { alwaysOn: true }).trigger('alwaysOn.maphilight');
      $(this).parent().find('.selected').data('maphilight', {
        alwaysOn: false
      }).trigger('alwaysOn.maphilight').removeClass('selected');

      $(this).addClass('selected');

      var id = this.id;
      $('#answer'+id).trigger('click');
    });
});

和<script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script>startpage.pstpl 的标签

之后，每个问题代码就变成了

<img class="marbel" qid="{SGQ}" src="http://localhost/misc/marbelX.png" />

正如建议的那样，问题仍然需要属于 8 答案单选列表选择器类型（因为脚本本质上只是将点击从该区域传递到单选选择器标签）。

于 2014-03-02T11:17:14.720 回答