之前寫了幾篇文章，都是利用Javascript為Limesurvey的題目添加新功能。利用Limesurvey可以使用Javascript及CSS的特性，這次決定來玩個大的，直接創造新的題目。其實概念很簡單，就是將Limesurvey作為一個儲存資料的容器。先根據資料的型態設定一個適當的題型，然後利用Javacript將原有的元件隱藏，以自己的設計取代，最後將資料寫入原本Limesurvey的元件中即可。

這次的範例是要做一個紀錄教育歷程的題型，也就是紀錄從小到大什麼時間在哪個階段唸書的題目。這類Life History的題目相當小眾，因此大多數的訪問系統都沒有設計此類題型，只能自己想辦法。因此，我預定以Long free text題型作為容器，先將文字框隱藏，並自創題型，最後將填寫的內容以json格式寫入文字框中記錄下來。

先來說明一下我設計的教育歷程題型。

題目以表格方式呈現，縱座標為時間，每半年為一格。橫坐標為教育程度。選擇教育程度後，在表格中點選就讀該教育程度的期間即可。填寫資訊會以json各式儲存，key為格子的代號，值則為改時間所就讀的教育程度。格子代號以「民國年-上下半年-教育程度順位」命名，例如"93-1-5"即代表「第5順位的教育程度在民國93年上半年」所就讀的教育程度。
紀錄於該題文字欄位的內容示意如下：

{"93-1-5":"碩士","92-2-5":"碩士","92-1-5":"碩士","91-2-5":"碩士","90-1-4":"大學","89-2-4":"大學","89-1-4":"大學","88-2-4":"大學","88-1-4":"大學","87-2-4":"大學","87-1-4":"大學","86-2-4":"大學","86-1-3":"高中普通科","85-2-3":"高中普通科","85-1-3":"高中普通科","84-2-3":"高中普通科","84-1-3":"高中普通科","83-2-3":"高中普通科","83-1-2":"國中","82-2-2":"國中","82-1-2":"國中","81-2-2":"國中","81-1-2":"國中","80-2-2":"國中","80-1-1":"小學","79-2-1":"小學","79-1-1":"小學","78-2-1":"小學","78-1-1":"小學","77-2-1":"小學","77-1-1":"小學","76-2-1":"小學","76-1-1":"小學","75-2-1":"小學","75-1-1":"小學","74-2-1":"小學"} 

由於整個題型的程式碼較長，為了不佔用篇幅，我就不完整呈現了。有興趣的人可以從文章最後的範例中取得。主要的關鍵如下：

....
<textarea id="hidden-answer" style="display:none;"></textarea> <script>
document.addEventListener('DOMContentLoaded', function () {
    const textarea = document.getElementById('answer{self.sgqa}');
    if (textarea) {
        textarea.style.display = 'none'; // 隱藏 Long Free Text 的 textarea
    }
....
    // 初始化隱藏欄位的答案
    function updateHiddenAnswer() {
        const answerTextarea = document.getElementById('answer{self.sgqa}'); // 原始的 Long Free Text
        const hiddenAnswer = document.getElementById('hidden-answer'); // 隱藏的暫存區

        // 更新隱藏區和 Long Free Text 的值
        const answerData = JSON.stringify(selectedData);
        hiddenAnswer.value = answerData;
        answerTextarea.value = answerData; // 同步到 Long Free Text
    }
....

最後，我設了一個示範問卷，有興趣的人可以玩玩看。