第27天：運用 Microsoft Copilot 來製作測驗問卷

2024 iThome 鐵人賽

DAY 27

自我挑戰組

使用 Microsoft Copilot 製作衛教網站系列第 27 篇

16th鐵人賽

zhongandrew

2024-10-07 13:50:56

138 瀏覽

分享至

今天，我將運用 Microsoft Copilot 來製作測驗問卷，這是我想在心理健康網站中增加的一個重要項目。這個測驗問卷的目的是了解使用者對各種心理疾病的認識程度，並且所有題目都是單選題。首先，我會設計測驗問卷的結構和內容，確保問卷能夠有效地評估使用者對心理疾病的了解程度。我會考慮包括多種心理疾病的相關問題，例如憂鬱症、躁鬱症、恐慌症、思覺失調症、強迫症、創傷後壓力症等。

再來，我將利用 Microsoft Copilot 來編寫問卷的 HTML 和 JavaScript 代碼。Copilot 能夠幫助我快速生成代碼片段，並提供有用的建議，這將大大提升我的編碼效率。我會確保問卷的界面簡潔且易於使用，並且能夠自動計算分數和提供結果反饋。

此外，我還會上網查詢有關心理健康測驗的資料，確保問卷的內容科學且準確。我會參考專業的心理健康測驗，並根據這些資料來設計問卷的題目和評分標準。這樣可以確保問卷的有效性和可靠性，為使用者提供有價值的評估結果。

透由這些工作，我希望能夠為心理健康網站增加一個實用且有趣的測驗問卷功能，幫助使用者更好地了解自己對心理疾病的認識程度。Microsoft Copilot 將在這個過程中發揮重要作用，幫助我提升編碼效率並確保代碼質量。

以下是Microsoft Copilot 生成HTML編碼部分:

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心理健康測驗問卷</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>心理健康測驗問卷</h1>
        <nav>
            <ul>
                <li><a href="index.html">首頁</a></li>
                <li><a href="disorders.html">精神疾病介紹</a></li>
                <li><a href="symptoms.html">症狀與診斷</a></li>
                <li><a href="treatment.html">治療與應對</a></li>
                <li><a href="quiz.html">測驗問卷</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="quiz">
            <h2>請回答以下問題來了解您的心理健康狀況</h2>
            <form id="quizForm">
                <div class="question">
                    <p>1. 憂鬱症主要影響個體的哪些方面？</p>
                    <input type="radio" name="q1" value="0"> 飲食和睡眠<br>
                    <input type="radio" name="q1" value="10"> 認知、生理功能、思考及行為<br>
                    <input type="radio" name="q1" value="0"> 運動和社交<br>
                    <input type="radio" name="q1" value="0"> 財務管理和學業<br>
                </div>
                <div class="question">
                    <p>2. 哪種方法對於預防躁鬱症的復發最為有效？</p>
                    <input type="radio" name="q2" value="0"> 偶爾停藥<br>
                    <input type="radio" name="q2" value="10"> 持續治療和保持健康的生活方式<br>
                    <input type="radio" name="q2" value="0"> 減少社交活動<br>
                    <input type="radio" name="q2" value="0"> 單純依賴藥物治療<br>
                </div>
                <div class="question">
                    <p>3. 恐慌症的特徵是什麼？</p>
                    <input type="radio" name="q3" value="0"> 長期的低落情緒<br>
                    <input type="radio" name="q3" value="10"> 突如其來的強烈恐懼感，通常無實際威脅<br>
                    <input type="radio" name="q3" value="0"> 經常出現幻覺和妄想<br>
                    <input type="radio" name="q3" value="0"> 反覆進行強迫行為<br>
                </div>
                <div class="question">
                    <p>4. 以下哪一項不是精神分裂症的症狀？</p>
                    <input type="radio" name="q4" value="0"> 聽幻覺<br>
                    <input type="radio" name="q4" value="10"> 社交回避<br>
                    <input type="radio" name="q4" value="0"> 妄想<br>
                    <input type="radio" name="q4" value="0"> 與現實脫節<br>
                </div>
                <div class="question">
                    <p>5. 強迫症患者常見的強迫行為是什麼？</p>
                    <input type="radio" name="q5" value="0"> 無故發怒<br>
                    <input type="radio" name="q5" value="10"> 重複檢查門窗是否關好<br>
                    <input type="radio" name="q5" value="0"> 過度食慾增加<br>
                    <input type="radio" name="q5" value="0"> 長時間坐著不動<br>
                </div>
                <div class="question">
                    <p>6. 創傷後壓力症（PTSD）的常見症狀包括什麼？</p>
                    <input type="radio" name="q6" value="0"> 過度樂觀<br>
                    <input type="radio" name="q6" value="10"> 創傷事件的經驗再現<br>
                    <input type="radio" name="q6" value="0"> 失憶<br>
                    <input type="radio" name="q6" value="0"> 對食物的渴望增加<br>
                </div>
                <div class="question">
                    <p>7. 下列哪一項是治療憂鬱症的主要方法之一？</p>
                    <input type="radio" name="q7" value="0"> 強迫運動<br>
                    <input type="radio" name="q7" value="10"> 心理治療<br>
                    <input type="radio" name="q7" value="0"> 完全依賴社會支持<br>
                    <input type="radio" name="q7" value="0"> 多次自我診斷<br>
                </div>
                <div class="question">
                    <p>8. 躁鬱症的躁期症狀通常包括什麼？</p>
                    <input type="radio" name="q8" value="10"> 過度自信和睡眠需求減少<br>
                    <input type="radio" name="q8" value="0"> 持續的悲傷和無動力<br>
                    <input type="radio" name="q8" value="0"> 對社交活動失去興趣<br>
                    <input type="radio" name="q8" value="0"> 持續的低自尊<br>
                </div>
                <div class="question">
                    <p>9. 在治療恐慌症時，哪種技術有助於減少症狀？</p>
                    <input type="radio" name="q9" value="0"> 禁食<br>
                    <input type="radio" name="q9" value="10"> 深呼吸和肌肉放鬆技術<br>
                    <input type="radio" name="q9" value="0"> 過度運動<br>
                    <input type="radio" name="q9" value="0"> 長期隔離<br>
                </div>
                <div class="question">
                    <p>10. 精神分裂症的治療通常包括什麼？</p>
                    <input type="radio" name="q10" value="0"> 只依賴藥物治療<br>
                    <input type="radio" name="q10" value="10"> 藥物治療與心理社會治療相結合<br>
                    <input type="radio" name="q10" value="0"> 自我管理和避開社會<br>
                    <input type="radio" name="q10" value="0"> 不治療，自行康復<br>
                </div>
                <button type="button" onclick="submitQuiz()">提交</button>
            </form>
            <p id="result"></p>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

以下是Microsoft Copilot 生成JavaScript編碼部分:

function submitQuiz() {
    const questions = document.querySelectorAll('.question');
    let score = 0;

    questions.forEach((question, index) => {
        const selectedOption = question.querySelector('input[name="q' + (index + 1) + '"]:checked');
        if (selectedOption) {
            score += parseInt(selectedOption.value);
        }
    });

    let result = '';
    if (score >= 80) {
        result = '您的心理健康狀況良好。';
    } else if (score >= 50) {
        result = '您的心理健康狀況需要注意。';
    } else {
        result = '您可能需要尋求專業的心理健康幫助。';
    }

    document.getElementById('result').innerText = '您的得分是：' + score + '。' + result;
}