limesurvey의 새 항목 유형

Question

limesurvey 기반 설문 조사에 질문 유형을 추가하고 싶습니다. 그것은 표준 raven-like IQ tests을위한 것이며, 사용자가 아래의 라디오 버튼을 클릭하는 대신 그림 영역에서 올바른 선택을 클릭 할 수 있기를 바랍니다.

독립 실행 형 (link)으로 작동하는 JQuery maphighlight 스 니펫이 있지만 limesurvey에 가장 잘 통합하는 방법에 대한 궁금한 점이 있습니까?

limesurvey 질문 플러그인에 관한 문서는 부족한 것처럼 보이지만 내가 말할 수있는 것부터는 주로 사용자 지정 데이터베이스 항목이 필요할 때를위한 것입니다. 이 목적을 위해, 대답은 단지 1-8의 숫자이므로 프론트 엔드의 Javascript로 얻을 수 있어야합니다. 그러나 나는 약 60 가지의 질문을 가지고 있다고 생각하고, 그것을 중심 어딘가에 추가하는 것이 이치에 맞을 것이다.

누구든지 올바른 방향으로 나를 가리킬 수 있습니까?

Answer 1

고맙습니다. 제안은 정말 도움이되었습니다. 그러나 내가 추가하고 싶은 것이 하나 더있다. 질문 유형이 60 회 반복해야했기 때문에 각 질문에 대해 별도로 답장하지 않는 것이 논리적 인 것처럼 보였습니다. 고맙게도, 템플릿을 통해서도 알아낼 수 있습니다.

최종 솔루션은 기본적으로 tpartner가 제공 한 조언을 따릅니다. 나는

$(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'); 
    }); 
}); 

을 template.js하려면 다음 코드를 넣어 필요하고 <script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script> 태그는 각 질문의 코드는 단지

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

질문은 여전히 ​​필요가 된,

후 startpage.pstpl하기 (스크립트가 본질적으로 지역에서 라디오 선택 태그로 클릭을 전달하기 때문에) 제안 된대로 8- 응답 라디오 목록 선택자 유형이어야합니다.

Answer 2

왜 새로운 질문 유형을 만드시겠습니까?

자바 스크립트에서 쉽게 할 수 있습니다. 단일 선택 사항 (라디오 방송)을 선택하고 스크립트를 사용하십시오. 일부 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 속성을 사용할 수 있습니다. 의 ID를 일치하는 응답 코드로 목록 라디오 질문을 작성

1) LimeSUrvey

Answer 3

당신이 your example에서 이미지 및지도 영역을 사용할 경우의 매뉴얼에서 가져온

예 ... 당신의 지도 영역 (A, B, C ...).

2) 목록 라디오 질문 소스에 이미지와지도를 삽입하십시오.

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>