iT邦幫忙

0

Limesurvey進階應用--單選題「其他」選項的進階用法

  • 分享至 

  • xImage
  •  

單選題是問卷調查中最普遍的題型。除了一般固定的選項,有時我們也會希望加上一個選項「其他」,並在後面開一個文字欄位,讓填答者可以自由輸入他的答案。
Limesurvey的單選題也提供這樣的功能,同時還能夠自訂「其他」選項的文字,並決定這個選項要放在所有選項中的哪個位子。例如我們設計一個詢問教育程度的題目,我們可以這樣做:

  1. 選擇題型為 "Single choice question List (radio)"
  2. 輸入題目及選項
  3. 打開Other設定
  4. 於Display類別中設定Label for 'Other:' option內容為「其他(請說明)」
  5. 設定 Position for 'Other:' option 為 after specific answer option
  6. 於Answer code for 'After specific answer option'輸入要將「其他」放在那個選項之後。
    我們就可以得到這樣的結果:
    https://ithelp.ithome.com.tw/upload/images/20241026/20142528g30AensZJi.png

但有時,我們也想要來點變化,不把「其他」當「其他」用,而讓這個選項變成一個附帶文字欄位的一般選項。在此情形下,除了運用Label for 'Other:' option改變選項的文字,並利用Position for 'Other:' option及Answer code for 'After specific answer option'將選項移動到適當的位子外,我們可能還需要兩個功能:

  1. 定義文字欄位中可輸入的數值範圍或內容
  2. 為此欄位後加上文字

我們接續詢問最高教育程度的題目,接下來我們可能會接著問....
「請問您目前是畢業、肄業或就學中?
  (1) 畢業  (2) 肄業  (3) 就學中,目前就讀_____年級」

在這個題目中,我們將把「其他」當成選項3,除了將Label for 'Other:' option的內容設定為「就學中,目前就讀」以及將選項置於選項2之後外,還需要在欄位的後面加上「年級」二字,並希望限制輸入的內容僅能輸入數字1-12。

為單選題的「其他」文字欄位加上後置文字

這個作法的概念發想其實與Limesurvey進階應用--多重數值題設定不同前後文字及填答範圍中,為不同數值欄位加上不同的前後文字類似,只是面對的題型不同,所以做法也有些不同。語法如下:

<script type="text/javascript">
$(document).ready(function() {
    var otherInput = $('input:text[name="{self.sgqa}"]');
    otherInput.after('<span>年級</span>');
    //調整欄位寬度
    otherInput.css('width', '8ch');
    otherInput.css('display', 'inline-block');
});
</script>
<style type="text/css">
input:text[name$="{self.sgqa}"] {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

span {
    vertical-align: middle;
      font-weight: bold; 
    color: gray; 
    margin-left: 5px;
}
</style>

在上述程式中,我們用{self.sgqa}帶出題目的代碼,以指定我們要處理的欄位。除了加上後置文字之外,也配合調整文字的位子及顏色,使用了一點css語法。
我們只要將此文字貼到題目原始碼中即可。

對文字欄位的輸入內容進行驗證

在這個範例中,我希望限制在欄位中只能輸入阿拉伯數字,且範圍限制在1-12之間。我們可以利用Limesurvey單選題在logic類別的Question validation equation驗證合格的條件,並透過Question validation tip建立提示文字。
Question validation equation設定

is_empty(G07_other) || regexMatch('/^(1[0-2]|[1-9])$/', G07_other)

在這裡,我們僅需對other進行條件設定即可。other有兩種情況,在不是選擇03時為空白,但若選擇03時則需限制輸入內容。對於輸入內容的驗證,我們則使用Limesurvey提供的regexMatch函數,以正則表示的方式進行驗證。

Question validation tip
在此我們希望建立一個錯誤訊息,當填答者輸入不符規則的資料時,顯示說明,語法如下:

{if((!is_empty(G07_other) && !regexMatch('/^(1[0-2]|[1-9])$/', G07_other)), "<span style='color:red'>請輸入阿拉伯數字1-12。</span>", "")}

我們使用Limesurvey提供的if函數,設定在其他欄位有輸入內容,且內容非1-12時顯示提示文字「請輸入阿拉伯數字1-12。」為了醒目,我們設定顏色為紅色。這個if函數的應用很廣,可以讓題目配合情境變化,改天再以另一篇文章說明。

都設定完成後,我們就可以看到成果囉!
https://ithelp.ithome.com.tw/upload/images/20241026/20142528Lzoupk8X1t.png


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言