<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>於是寫下生活筆記</title><link>https://preview.yuslife.cc/tags/chatgpt/</link><description>Recent content in ChatGPT on 於是寫下生活筆記</description><generator>Hugo -- gohugo.io</generator><language>zh-TW</language><lastBuildDate>Sun, 25 Jun 2023 12:14:03 +0000</lastBuildDate><atom:link href="https://preview.yuslife.cc/tags/chatgpt/index.xml" rel="self" type="application/rss+xml"/><item><title>用 ChatGPT + MBTI 打造出高社群擴散的心理測驗網站！</title><link>https://preview.yuslife.cc/coding/chatgpt-mbti-test/</link><pubDate>Sun, 25 Jun 2023 12:14:03 +0000</pubDate><guid>https://preview.yuslife.cc/coding/chatgpt-mbti-test/</guid><description>AI 當道，你真的熟悉 ChatGPT 嗎？本文將透過與 ChatGPT 對話，並搭配 MBTI 人格分析，打造出高度社群擴散力的心理測驗網站！ 首先先來確認 ChatGPT 是否了解 MBTI 模型 考量 ChatGPT 經常給出</description><content:encoded><![CDATA[<p>AI 當道，你真的熟悉 ChatGPT 嗎？本文將透過與 ChatGPT 對話，並搭配 MBTI 人格分析，打造出高度社群擴散力的心理測驗網站！</p>
<h2 id="首先先來確認-chatgpt-是否了解-mbti-模型">首先先來確認 ChatGPT 是否了解 MBTI 模型</h2>
<p>考量 ChatGPT 經常給出錯誤的答案，在一開始先向 ChatGPT 詢問它是否了解 MBTI 人格分析測驗。</p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-01_hu9a9208e2d9b5132adae167027fa846a1_659599_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-01_hu9a9208e2d9b5132adae167027fa846a1_659599_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-01_hu9a9208e2d9b5132adae167027fa846a1_659599_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-01_hu9a9208e2d9b5132adae167027fa846a1_659599_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<h2 id="先從簡化後的測驗開始吧">先從簡化後的測驗開始吧</h2>
<p>傳統的 MBTI 測驗題目很多且需要花費不少時間作答，然而考量我們想要建立的是一個快速、高度擴散的測驗網站，題目數自然不能太多，因此我先請 ChatGPT 提供一個 5 題左右的簡易版 MBTI 測驗。</p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-02_hu86038a83a380fe268786b43a7f8c12de_348628_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-02_hu86038a83a380fe268786b43a7f8c12de_348628_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-02_hu86038a83a380fe268786b43a7f8c12de_348628_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-02_hu86038a83a380fe268786b43a7f8c12de_348628_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<p>當 ChatGPT 提供了簡易測驗後，我請它說明每一到題目與選項是如何給出最終結果的，確保這個測驗能具有一定的準確性與可信度。</p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-03_huc4d19ab7060799a09470f8b8a03a754a_575800_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-03_huc4d19ab7060799a09470f8b8a03a754a_575800_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-03_huc4d19ab7060799a09470f8b8a03a754a_575800_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-03_huc4d19ab7060799a09470f8b8a03a754a_575800_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<h2 id="接著好好包裝一個故事吧">接著好好包裝一個故事吧</h2>
<p>接下來我請 ChatGPT 將前述的測驗包裝成一個情境，這邊我想請他將測驗以受試者是主角，它走入了一個森林中，並將遇到一系列的情境，透過每個情境的抉擇，最終找出它對應的 MBTI 人格。</p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-04_hud83469a6d9b527b0b8afa981e605308e_488325_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-04_hud83469a6d9b527b0b8afa981e605308e_488325_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-04_hud83469a6d9b527b0b8afa981e605308e_488325_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-04_hud83469a6d9b527b0b8afa981e605308e_488325_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<p>在 ChatGPT 幫我設計完情境後，我希望它能幫我將 MBTI 的 16 型人格分別給予對應的 16 種動物，以做為整個測驗的結果，同時要求 ChatGPT 提供對應的描述。</p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-05_hua4a5ece75c0a4ff7eb013b74ff750e99_469813_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-05_hua4a5ece75c0a4ff7eb013b74ff750e99_469813_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-05_hua4a5ece75c0a4ff7eb013b74ff750e99_469813_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-05_hua4a5ece75c0a4ff7eb013b74ff750e99_469813_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<p>除了對應的描述外，我還希望這些動物具有能力值，因此請 ChatGPT 依照活躍度、領導力、智慧值、力量值、敏捷度這 5 個象限，從 1 - 10 分個別給予能力值。</p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-06_hu083af509fc292170a29f21fd4d6c1bb6_283739_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-06_hu083af509fc292170a29f21fd4d6c1bb6_283739_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-06_hu083af509fc292170a29f21fd4d6c1bb6_283739_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-06_hu083af509fc292170a29f21fd4d6c1bb6_283739_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<p>在整個包裝的最後，我請 ChatGPT 提供一段故事引言，並提供一個標題。</p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-07_hueaa4086782ee67094c7275948eb3bd03_638731_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-07_hueaa4086782ee67094c7275948eb3bd03_638731_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-07_hueaa4086782ee67094c7275948eb3bd03_638731_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-07_hueaa4086782ee67094c7275948eb3bd03_638731_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-08_huf8fec16663f540ba03824c7d30ae074b_54162_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-08_huf8fec16663f540ba03824c7d30ae074b_54162_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-08_huf8fec16663f540ba03824c7d30ae074b_54162_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-08_huf8fec16663f540ba03824c7d30ae074b_54162_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<h2 id="接著開始寫成網站吧當然還是-chatgpt-來寫">接著開始寫成網站吧！當然還是 ChatGPT 來寫</h2>
<p>首先，先請 ChatGPT 將前面討論的內容轉化成為一個 Html 與 Javascript 的網站，並告訴 ChatGPT 網站的流程與邏輯。</p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-09_hua705714d08e41ecc4ca988ebe8d025cc_380371_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-09_hua705714d08e41ecc4ca988ebe8d025cc_380371_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-09_hua705714d08e41ecc4ca988ebe8d025cc_380371_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-09_hua705714d08e41ecc4ca988ebe8d025cc_380371_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<p>在第一次提供的程式碼可以發現，並沒有將測驗內容放入程式碼中，因此我請 ChatGPT 將內容填入。</p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-10_huc18dc42b3b479185e99bcf350e10804f_241869_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-10_huc18dc42b3b479185e99bcf350e10804f_241869_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-10_huc18dc42b3b479185e99bcf350e10804f_241869_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-10_huc18dc42b3b479185e99bcf350e10804f_241869_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<p>而在這過程中可以發現 ChatGPT 經常性的發生「失憶」現象，因此除了不斷提醒之外，也可以嘗試直接將前面生成的內容複製貼上提供給 ChatGPT。</p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-11_hu707eaa4db2842428a3b99cbd7a28f907_398780_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-11_hu707eaa4db2842428a3b99cbd7a28f907_398780_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-11_hu707eaa4db2842428a3b99cbd7a28f907_398780_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-11_hu707eaa4db2842428a3b99cbd7a28f907_398780_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<p>在這過程中，我們可以將 ChatGPT 所提供的程式碼貼至 Codepen 等網站中，快速測試程式碼是否正常運作。</p>
<p>若發現無法運作，可以將狀況甚至是 Console（主控台）中報的錯誤提供給 ChatGPT 進行修正。</p>
<p>
<figure>
    <picture>
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-12_hu96455d76b8e8239878d9c1e102c03eb4_183801_400x0_resize_q75_h2_box_3.webp" media="(max-width:500px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-12_hu96455d76b8e8239878d9c1e102c03eb4_183801_600x0_resize_q75_h2_box_3.webp" media="(max-width:700px)" type="image/webp">
        
        <source data-srcset="/src/images/post/chatgpt-mbti-test-12_hu96455d76b8e8239878d9c1e102c03eb4_183801_960x0_resize_q75_h2_box_3.webp" type="image/webp">
        
        <img src="/src/images/img-placeholder.svg" data-src="/src/images/post/chatgpt-mbti-test-12_hu96455d76b8e8239878d9c1e102c03eb4_183801_960x0_resize_box_3.png" alt=""
            class="lazy"  width="960" height="540">
    </picture>
    
</figure></p>
<h2 id="最終成果">最終成果</h2>
<p>最後，在多次嘗試與 ChatGPT 對話與修正之下，終於完成了這個網站。</p>
<p>大家若有興趣的話可以到「<a href="https://animaltest.yuslife.cc/">這裡</a>」來玩玩看。</p>
<p>（小提醒：文章截圖為方便說明，有部分為事後撰文時的對話，可能與實際網頁及原始對話不同，詳細可參考下方對話過程；另網頁部分程式碼非由 ChatGPT 撰寫，而是由筆者修正調整。）</p>
<ul>
<li>範例網站：<a href="https://animaltest.yuslife.cc/">https://animaltest.yuslife.cc/</a></li>
<li>程式原始碼：<a href="https://github.com/chenghanxyu/mbti-test">https://github.com/chenghanxyu/mbti-test</a></li>
<li>與 ChatGPT 對話過程：<a href="https://chat.openai.com/share/2e954a3d-5355-46fb-82dc-eb1696eb8e10">https://chat.openai.com/share/2e954a3d-5355-46fb-82dc-eb1696eb8e10</a></li>
</ul>
]]></content:encoded></item></channel></rss>