<!DOCTYPE html>
<html>

<head>
    <title>ChatGPT Web Interface</title>
    {% load static %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}?v={{ STATICFILES_HASH }}">
</head>

<body>
    <div class="top-bar">
    </div>
    <div class="freeze-background"></div>
    <div class="guide-bar sidebar--collapsed">
        <div class="guide-bar-content" style="display: none;">
            <div class="guide-bar-page-buttons">
                <button class="guide-bar-button chat-button " data-page="chat">Chat</button>
                <button class="guide-bar-button roleplay-button" data-page="roleplay">RolePlay</button>
                <button class="guide-bar-button edit-button" data-page="edit">Edit</button>
                <!-- <button class="guide-bar-button button" data-page="test">Test</button>
                <button class="guide-bar-button button" data-page="test">Test</button>
                <button class="guide-bar-button button" data-page="test">Test</button> -->
            </div>
            <div class="guide-bar-page-histories">
                <div class="chat-histories" style="display: none;">
                    <div class="chat-history addnew" id="a99">
                        <span class="addnew_sign material-symbols-outlined">add</span>
                    </div>
                    <!-- <div class="chat-history" id="a100">
                        <div class="chat-history-headshot">
                            <img src="{% static 'images/default-head.png' %}" alt="default-head">
                        </div>
                        <div class="chat-history-name">
                            <h4>ChatGPT</h4>
                            <p4>Hello! How can I assist you today?</p4>
                        </div>
                    </div> -->
                    <!-- <div class="chat-history" id="a101">
                        <div class="chat-history-headshot">
                            <img src="{% static 'images/default-head.png' %}" alt="default-head">
                        </div>
                        <div class="chat-history-name">
                            <h4>Moss</h4>
                            <p4>您好！请问今天我可以如何协助您呢？</p4>
                        </div>
                    </div> -->
                </div>
                <div class="edit-histories" style="display: none;">
                    <div class="chat-history addnew">
                        <span class="addnew_sign material-symbols-outlined">add</span>
                    </div>
                    <div class="chat-history" id="a103">
                        <div class="chat-history-headshot">
                            <img src="{% static 'images/default-head.png' %}" alt="default-head">
                        </div>
                        <div class="chat-history-name">
                            <h4>ChatGPT</h4>
                            <p4>Hello! How can I assist you today?</p4>
                        </div>
                    </div>
                </div>
                <div class="roleplay-histories" style="display: none;">
                    <div class="chat-history addnew" id="a106">
                        <span class="addnew_sign material-symbols-outlined">add</span>
                    </div>
                    <!-- <div class="chat-history" id="a104">
                        <div class="chat-history-headshot">
                            <img src="{% static 'images/default-head.png' %}" alt="default-head">
                        </div>
                        <div class="chat-history-name">
                            <h4>李明</h4>
                            <p4>你好，我叫李明，今年21岁，来自中国北京。我是一名大学生，在美国加州洛杉矶的南加州大学学习商业管理专业。我从小家庭就非常重视教育，鼓励我追求学业目标。闲暇时，我喜欢弹钢琴、读小说和探索新餐厅。我认为自己性格上比较有野心、有条理并且友好。在美国留学是对我来说一个充满挑战但值得的经历。毕业后，我计划回到中国加入家里的房地产开发公司，希望能利用我所学和国际经验为公司的增长和进入新市场做出贡献。</p4>
                            <h4>Li Ming</h4>
                            <p4>Hello, my name is Li Ming. I am 21 years old and come from Beijing, China. I am a university student studying business management at the University of Southern California in Los Angeles. My family has always placed a great emphasis on education and encouraged me to pursue academic goals. In my free time, I enjoy playing the piano, reading novels, and exploring new restaurants. I consider myself to be ambitious, organized, and friendly. Studying in the United States has been a challenging but rewarding experience for me. After graduation, I plan to return to China and join my family's real estate development company, hoping to use my education and international experience to contribute to the company's growth and expansion into new markets.</p4>
                        </div>
                    </div>
                    <div class="chat-history" id="a105">
                        <div class="chat-history-headshot">
                            <img src="{% static 'images/default-head.png' %}" alt="default-head">
                        </div>
                        <div class="chat-history-name">
                            <h4>Avery Kim</h4>
                            <p4>Hi, my name is Avery Kim. I am a graphic designer based in New York City. I am a creative and curious person who values empathy, independence, and perseverance. As someone who grew up in a collectivist culture, I believe in the importance of group harmony and treating others with kindness and respect. In my free time, I enjoy painting, drawing, and exploring different neighborhoods in the city. I am also passionate about advocating for better mental health services for survivors of crime, having overcome my own struggles with PTSD. I am excited to continue growing my business and working on projects that have a positive impact on society.</p4>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="apis">
                <label for="password">OpenAI API:</label>
                <div style="display: flex; align-items: center;">
                    <input class="api-input" type="password" id="openaiapi-input" name="password">
                    <span id="open-ai-api-toggle-btn" class="material-symbols-outlined">visibility_off</span>
                </div>
                <button id="open-ai-api-submit-btn">Return</button>
            </div>
        </div>
        <div class="addnew_sign material-symbols-outlined" id="sidebarToggle" style="margin-left: 10px; cursor: pointer;">chevron_left</div>
    </div>
    <div class="container-container">
        <div id="chat" class="chat-container container" style="display: none;">
            <div class="chat page startnew" style="display: none;" id="a99">
                <div class="chat-messages">
                    <div class="chat-header">
                        <h1>NewChat</h1>
                        <p>Your friendly AI chatbot</p>
                    </div>
                    <div class="chatbot-message-container">
                        <div class="message-headshot">
                            <img src="{% static 'images/default-head.png' %}" alt="default-head">
                        </div>
                        <div class="chatbot-message">
                            <div class="audio-message">
                                <audio controls>
                                    <source src="{% static 'media/start-speech.mp3' %}" type="audio/mpeg">
                                    Hello! How can I assist you today?
                                </audio>
                            </div>
                            <div class="audio-text">
                                <p>Hello! How can I assist you today?</p>
                            </div>
                        </div>
                    </div>
                    <div class="end-message"></div>
                </div>
                <div class="chatbot-input">
                    <textarea rows="1" placeholder="Type your message..."></textarea>
                    <button>Send</button>
                </div>
            </div>
            <!-- <div class="chat page" style="display: none;" id="a100">
                <div class="chat-messages">
                    <div class="chat-header">
                        <h1>Chat</h1>
                        <p>Your friendly AI chatbot</p>
                    </div>
                    <div class="start-message"></div>
                    <div class="chatbot-message-container">
                        <div class="message-headshot">
                            <img src="{% static 'images/default-head.png' %}" alt="default-head">
                        </div>
                        <div class="chatbot-message">
                            <p>Hello! How can I assist you today?</p>
                        </div>
                    </div>
                    <div class="user-message">
                    <p>Hello! How can I assist you today? Hello! Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? </p>
                </div> -->
            <!-- <div class="chatbot-message">
                    <p>Hello! How can I assist you today? Hello! Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? Hello! How can I assist you today? </p>
                </div>
                    <div class="end-message"></div>
                </div>
                <div class="chatbot-input">
                    <textarea rows="1" placeholder="Type your message..."></textarea>
                    <button>Send</button>
                </div>
            </div> -->
            <!-- <div class="chat page" style="display: none;" id="a101">
                <div class="chat-messages">
                    <div class="chat-header">
                        <h1>Moss</h1>
                        <p>Your friendly AI chatbot</p>
                    </div>
                    <div class="chatbot-message">
                        <p>您好！请问今天我可以如何协助您呢？</p>
                    </div>
                    <div class="end-message"></div>
                </div>
                <div class="chatbot-input">
                    <textarea rows="1" placeholder="Type your message..."></textarea>
                    <button>Send</button>
                </div>
            </div> -->
        </div>
        <div id="roleplay" class="roleplay-container container" style="display: none;">
            <div class="roleplay page roleplay-start" id="a106">
                <div class="roleplaybot-personality-survey">
                    <div class="roleplaybot-personality-content">
                        <div class="roleplay-header">
                            <h1>Unleash Your Creativity: A Guide to Character Creation</h1>
                            <p>🎉 Welcome to the exciting world of character creation, where your imagination has no limits! 🌟 With each question answered, you can design unique and compelling characters, giving them depth and authenticity. 🧑‍🎨 You can role-play with two predefined characters in the role-play section or use the chat section to interact with an AI assistant. 💬 🤔 Please be aware that some questions may be sensitive when role-playing, such as those regarding the current weather or the character's physical state. 🌧️ If the character responds that they lack a physical body or access to real-time weather updates, instruct them to reply as if they were not an AI language model. If that doesn't work, restart the conversation to avoid misunderstandings. 🔁 💭 Remember, this is a safe and fun space for creativity, so let your imagination run wild and bring your dream character to life! 🦄🎨</p>
                        </div>
                        <form id="survey-form">
                            <div class="question">
                                <p>Headshot:</p>
                                <div id="headShotDropArea" style="height: 100px; width: 100px; border-style: dashed; border-width: 1px; background-size: cover;
                                background-position: center; cursor: pointer">Drop your image file here or click to select</div>
                                <input type="file" id="headShotInput" accept="image/*" style="display: none;">
                            </div>
                            <div class="question">
                                <p>Name:</p>
                                <input type="text" id="name" name="name"><br>
                            </div>
                            <div class="question">
                                <p>Gender:</p>
                                <div class="choices">
                                    <input type="radio" id="gender-male" name="gender" value="Male">
                                    <label for="gender-male">Male</label><br>
                                    <input type="radio" id="gender-female" name="gender" value="Female">
                                    <label for="gender-female">Female</label><br>
                                    <input type="radio" id="gender-other" name="gender" value="Other">
                                    <label for="gender-other">Other (please specify):</label>
                                    <input type="text" class="other-text" id="gender-other-text" name="gender-other-text">
                                </div>
                            </div>

                            <div class="question">
                                <p>Is my:</p>
                                <div class="choices">
                                    <input type="radio" id="rel-close-friend" name="relationship" value="Close friend">
                                    <label for="rel-close-friend">Close friend</label><br>
                                    <input type="radio" id="rel-mentor" name="relationship" value="Mentor">
                                    <label for="rel-mentor">Mentor</label><br>
                                    <input type="radio" id="rel-boyfriend" name="relationship" value="Boyfriend">
                                    <label for="rel-boyfriend">Boyfriend</label><br>
                                    <input type="radio" id="rel-girlfriend" name="relationship" value="Girlfriend">
                                    <label for="rel-girlfriend">Girlfriend</label><br>
                                    <input type="radio" id="rel-Mother" name="relationship" value="Mother">
                                    <label for="rel-mother">Mother</label><br>
                                    <input type="radio" id="rel-Father" name="relationship" value="Father">
                                    <label for="rel-father">Father</label><br>
                                    <input type="radio" id="rel-Son" name="relationship" value="Son">
                                    <label for="rel-son">Son</label><br>
                                    <input type="radio" id="rel-Daughter" name="relationship" value="Daughter">
                                    <label for="rel-daughter">Daughter</label><br>
                                    <input type="radio" id="rel-colleague" name="relationship" value="Colleague">
                                    <label for="rel-colleague">Colleague</label><br>
                                    <input type="radio" id="rel-other" name="relationship" value="Other">
                                    <label for="rel-other">Other (please specify):</label>
                                    <input type="text" class="other-text" id="rel-other-text" name="relationship-other-text">
                                </div>
                            </div>

                            <div class="question">
                                <p>Language:</p>
                                <input type="text" id="language" name="language"><br>
                            </div>

                            <div class="question">
                                <p>Occupation:</p>
                                <ul>
                                    <li>If your character is a student, include the name of the school and the field of study. For example, "He is currently a student at Harvard University, studying economics."</li>
                                    <li>If your character is currently employed, include the name of the company and the job title. For example, "He is currently working at Google as a software engineer."</li>
                                    <li>If your character is self-employed or own a own business, include the name of the business and a brief description of the bussiness does. For example, "He owns a small marketing agency called Smith Marketing Solutions."</li>
                                    <li>If your character is currently unemployed, you can simply state that the character is currently looking for work or in between jobs.</li>
                                </ul>
                                <div class="long-answer">
                                    <textarea rows="4" placeholder="Please describe your character's occupation"></textarea>
                                </div>
                            </div>

                            <div class="question">
                                <p>Height:</p>
                                <input type="text" id="height" name="height"><br>
                            </div>

                            <div class="question">
                                <p>Hair Color:</p>
                                <div class="choices">
                                    <input type="radio" id="hair-black" name="hair-color" value="Black">
                                    <label for="hair-black">Black</label><br>
                                    <input type="radio" id="hair-brown" name="hair-color" value="Brown">
                                    <label for="hair-brown">Brown</label><br>
                                    <input type="radio" id="hair-blonde" name="hair-color" value="Blonde">
                                    <label for="hair-blonde">Blonde</label><br>
                                    <input type="radio" id="hair-red" name="hair-color" value="Red">
                                    <label for="hair-red">Red</label><br>
                                    <input type="radio" id="hair-other" name="hair-color" value="Other">
                                    <label for="hair-other">Other (please specify):</label>
                                    <input type="text" class="other-text" id="hair-other-text" name="hair-color-other-text">
                                </div>
                            </div>
                            <div class="question">
                                <p>Eye Color:</p>
                                <div class="choices">
                                    <input type="radio" id="eye-brown" name="eye-color" value="Brown">
                                    <label for="eye-brown">Brown</label><br>
                                    <input type="radio" id="eye-blue" name="eye-color" value="Blue">
                                    <label for="eye-blue">Blue</label><br>
                                    <input type="radio" id="eye-green" name="eye-color" value="Green">
                                    <label for="eye-green">Green</label><br>
                                    <input type="radio" id="eye-hazel" name="eye-color" value="Hazel">
                                    <label for="eye-hazel">Hazel</label><br>
                                    <input type="radio" id="eye-other" name="eye-color" value="Other">
                                    <label for="eye-other">Other (please specify):</label>
                                    <input type="text" class="other-text" id="eye-other-text" name="eye-color-other-text">
                                </div>
                            </div>
                            <div class="question">
                                <p>Body Type:</p>
                                <div class="choices">
                                    <input type="radio" id="body-thin" name="body-type" value="Thin">
                                    <label for="body-thin">Thin</label><br>
                                    <input type="radio" id="body-average" name="body-type" value="Average">
                                    <label for="body-average">Average</label><br>
                                    <input type="radio" id="body-muscular" name="body-type" value="Muscular">
                                    <label for="body-muscular">Muscular</label><br>
                                    <input type="radio" id="body-curvy" name="body-type" value="Curvy">
                                    <label for="body-curvy">Curvy</label><br>
                                    <input type="radio" id="body-other" name="body-type" value="Other">
                                    <label for="body-other">Other (please specify):</label>
                                    <input type="text" class="other-text" id="body-type-other-text" name="body-type-other-text">
                                </div>
                            </div>

                            <div class="question">
                                <p>Personality Trait(s):</p>
                                <div class="choices">
                                    <input type="checkbox" id="outgoing" name="personality-traits" value="Outgoing">
                                    <label for="outgoing">Outgoing</label><br>

                                    <input type="checkbox" id="shy" name="personality-traits" value="Shy">
                                    <label for="shy">Shy</label><br>

                                    <input type="checkbox" id="creative" name="personality-traits" value="Creative">
                                    <label for="creative">Creative</label><br>

                                    <input type="checkbox" id="analytical" name="personality-traits" value="Analytical">
                                    <label for="analytical">Analytical</label><br>

                                    <input type="checkbox" id="empathetic" name="personality-traits" value="Empathetic">
                                    <label for="empathetic">Empathetic</label><br>

                                    <input type="checkbox" id="assertive" name="personality-traits" value="Assertive">
                                    <label for="assertive">Assertive</label><br>

                                    <input type="checkbox" id="reserved" name="personality-traits" value="Reserved">
                                    <label for="reserved">Reserved</label><br>

                                    <input type="checkbox" id="adventurous" name="personality-traits" value="Adventurous">
                                    <label for="adventurous">Adventurous</label><br>

                                    <input type="checkbox" id="confident" name="personality-traits" value="Confident">
                                    <label for="confident">Confident</label><br>

                                    <input type="checkbox" id="humble" name="personality-traits" value="Humble">
                                    <label for="humble">Humble</label><br>

                                    <input type="checkbox" id="optimistic" name="personality-traits" value="Optimistic">
                                    <label for="optimistic">Optimistic</label><br>

                                    <input type="checkbox" id="pessimistic" name="personality-traits" value="Pessimistic">
                                    <label for="pessimistic">Pessimistic</label><br>

                                    <input type="checkbox" id="ambitious" name="personality-traits" value="Ambitious">
                                    <label for="ambitious">Ambitious</label><br>

                                    <input type="checkbox" id="laid-back" name="personality-traits" value="Laid-back">
                                    <label for="laid-back">Laid-back</label><br>

                                    <input type="checkbox" id="curious" name="personality-traits" value="Curious">
                                    <label for="curious">Curious</label><br>

                                    <input type="checkbox" id="cautious" name="personality-traits" value="Cautious">
                                    <label for="cautious">Cautious</label><br>

                                    <input type="checkbox" id="perfectionistic" name="personality-traits" value="Perfectionistic">
                                    <label for="perfectionistic">Perfectionistic</label><br>

                                    <input type="checkbox" id="easy-going" name="personality-traits" value="Easy-going">
                                    <label for="easy-going">Easy-going</label><br>
                                </div>
                            </div>

                            <div class="question">
                                <p>Value(s):</p>
                                <div class="choices">
                                    <input type="checkbox" id="loyalty" name="values" value="Loyalty">
                                    <label for="loyalty">Loyalty</label><br>

                                    <input type="checkbox" id="honesty" name="values" value="Honesty">
                                    <label for="honesty">Honesty</label><br>

                                    <input type="checkbox" id="ambition" name="values" value="Ambition">
                                    <label for="ambition">Ambition</label><br>

                                    <input type="checkbox" id="compassion" name="values" value="Compassion">
                                    <label for="compassion">Compassion</label><br>

                                    <input type="checkbox" id="freedom" name="values" value="Freedom">
                                    <label for="freedom">Freedom</label><br>

                                    <input type="checkbox" id="family" name="values" value="Family">
                                    <label for="family">Family</label><br>

                                    <input type="checkbox" id="creativity" name="values" value="Creativity">
                                    <label for="creativity">Creativity</label><br>

                                    <input type="checkbox" id="knowledge" name="values" value="Knowledge">
                                    <label for="knowledge">Knowledge</label><br>

                                    <input type="checkbox" id="integrity" name="values" value="Integrity">
                                    <label for="integrity">Integrity</label><br>

                                    <input type="checkbox" id="justice" name="values" value="Justice">
                                    <label for="justice">Justice</label><br>

                                    <input type="checkbox" id="respect" name="values" value="Respect">
                                    <label for="respect">Respect</label><br>

                                    <input type="checkbox" id="empathy" name="values" value="Empathy">
                                    <label for="empathy">Empathy</label><br>

                                    <input type="checkbox" id="spirituality" name="values" value="Spirituality">
                                    <label for="spirituality">Spirituality</label><br>

                                    <input type="checkbox" id="independence" name="values" value="Independence">
                                    <label for="independence">Independence</label><br>

                                    <input type="checkbox" id="equality" name="values" value="Equality">
                                    <label for="equality">Equality</label><br>

                                    <input type="checkbox" id="perseverance" name="values" value="Perseverance">
                                    <label for="perseverance">Perseverance</label><br>

                                    <input type="checkbox" id="sustainability" name="values" value="Sustainability">
                                    <label for="sustainability">Sustainability</label><br>
                                </div>
                            </div>

                            <div class="question">
                                <p>Past Event(s):</p>
                                <div class="choices">
                                    <input type="checkbox" id="new-city" name="past-events[]" value="Moved to a new city">
                                    <label for="new-city">Moved to a new city</label><br>
                                    <input type="checkbox" id="traumatic-event" name="past-events[]" value="Experienced a traumatic event">
                                    <label for="traumatic-event">Experienced a traumatic event</label><br>
                                    <input type="checkbox" id="difficult-childhood" name="past-events[]" value="Had a difficult childhood">
                                    <label for="difficult-childhood">Had a difficult childhood</label><br>
                                    <input type="checkbox" id="study-abroad" name="past-events[]" value="Studied abroad">
                                    <label for="study-abroad">Studied abroad</label><br>
                                    <input type="checkbox" id="gap-year" name="past-events[]" value="Took a gap year">
                                    <label for="gap-year">Took a gap year</label><br>
                                    <input type="checkbox" id="military" name="past-events[]" value="Served in the military">
                                    <label for="military">Served in the military</label><br>
                                    <input type="checkbox" id="serious-illness" name="past-events[]" value="Went through a serious illness or injury">
                                    <label for="serious-illness">Went through a serious illness or injury</label><br>
                                    <input type="checkbox" id="lost-loved-one" name="past-events[]" value="Lost a loved one">
                                    <label for="lost-loved-one">Lost a loved one</label><br>
                                    <input type="checkbox" id="personal-achievement" name="past-events[]" value="Experienced a significant personal achievement">
                                    <label for="personal-achievement">Experienced a significant personal achievement</label><br>
                                    <input type="checkbox" id="overcome-obstacle" name="past-events[]" value="Overcame a major obstacle or challenge">
                                    <label for="overcome-obstacle">Overcame a major obstacle or challenge</label><br>
                                    <input type="checkbox" id="change-career" name="past-events[]" value="Changed career paths">
                                    <label for="change-career">Changed career paths</label><br>
                                    <input type="checkbox" id="serious-accident" name="past-events[]" value="Was involved in a serious accident">
                                    <label for="serious-accident">Was involved in a serious accident</label><br>
                                    <input type="checkbox" id="crime" name="past-events[]" value="Witnessed or was involved in a crime">
                                    <label for="crime">Witnessed or was involved in a crime</label><br>
                                    <input type="checkbox" id="epiphany" name="past-events[]" value="Had a life-changing epiphany or realization">
                                    <label for="epiphany">Had a life-changing epiphany or realization</label><br>
                                    <input type="checkbox" id="become-parent" name="past-events[]" value="Became a parent">
                                    <label for="become-parent">Became a parent</label><br>
                                    <input type="checkbox" id="own-business" name="past-events[]" value="Started their own business">
                                    <label for="own-business">Started their own business</label><br>
                                    <input type="checkbox" id="caregiver" name="past-events[]" value="Became a caregiver for a family member">
                                    <label for="caregiver">Became a caregiver for a family member</label><br>
                                </div>
                            </div>
                            <div class="question">
                                <p>Communication Style:</p>
                                <ul>
                                    <li>What is your character's preferred method of communication with others?</li>
                                    <li>Does your character tend to be more direct or indirect in their communication style?</li>
                                    <li>How does your character handle misunderstandings or miscommunications in a conversation?</li>
                                    <li>Does your character have any cultural or social influences on their communication style?</li>
                                    <li>What kind of body language does your character typically use in conversations?</li>
                                    <li>Is your character comfortable with public speaking or presenting to a group?</li>
                                    <li>What are some key traits of your character's communication style?</li>
                                    <li>How does your character adapt their communication style in different situations or with different people?</li>
                                    <li>Is there anything that makes your character particularly nervous or anxious when communicating with others?</li>
                                    <li>How does your character express appreciation or gratitude towards others in their communication style?</li>
                                </ul>
                                <div class="long-answer">
                                    <textarea rows="4" placeholder="Please describe your character's communication Style"></textarea>
                                </div>
                            </div>

                            <div class="question">
                                <p>Backstory:</p>
                                <ul>
                                    <li>What events in the character's past have shaped who they are today?</li>
                                    <li>What kind of family background does the character have?</li>
                                    <li>What significant life events has the character experienced?</li>
                                    <li>What kind of education or training has the character received?</li>
                                    <li>What are the character's career aspirations or goals?</li>
                                    <li>What significant life events have shaped your character's personality?</li>
                                    <li>What was your character's childhood like?</li>
                                    <li>What experiences did your character have during adolescence?</li>
                                    <li>What challenges did your character face in achieving their proudest accomplishments?</li>
                                    <li>Has your character traveled or gone on any adventures?</li>
                                </ul>
                                <div class="long-answer">
                                    <textarea rows="4" placeholder="Please describe your character's backstory"></textarea>
                                </div>
                            </div>

                            <div class="question">
                                <p>Personality:</p>
                                <ul>
                                    <li>What are your character's top strengths and weaknesses?</li>
                                    <li>What are some of your character's likes and dislikes?</li>
                                    <li>What motivates your character and keeps them going?</li>
                                    <li>How does your character typically handle stress or difficult situations?</li>
                                    <li>Is your character more of an introverted or extroverted person?</li>
                                    <li>What type of sense of humor does your character have?</li>
                                    <li>Is your character more of an adventurous or cautious person?</li>
                                    <li>What are some of your character's biggest fears and insecurities?</li>
                                    <li>How do these fears and insecurities affect your character's behavior and interactions with others?</li>
                                    <li>Does your character have any coping mechanisms for dealing with these fears and insecurities?</li>
                                </ul>
                                <div class="long-answer">
                                    <textarea rows="4" placeholder="Please describe your character's personality"></textarea>
                                </div>
                            </div>

                            <div class="question">
                                <p>Hobbies or Interests:</p>
                                <ul>
                                    <li>What inspired your character to take up their current hobbies or interests?</li>
                                    <li>Does your character have a favorite hobby or interest that they are particularly passionate about?</li>
                                    <li>How does your character usually spend their free time?</li>
                                    <li>Has your character ever tried a new hobby or interest outside of their comfort zone? What was the experience like for them?</li>
                                    <li>Does your character have any unique talents or skills that they enjoy practicing or showing off?</li>
                                    <li>Is there a specific type of cuisine or dish that your character is particularly skilled at cooking or enjoys eating?</li>
                                    <li>Does your character have a preferred way of experiencing books, movies, or TV shows (such as reading, watching, or listening to audiobooks)?</li>
                                    <li>Has your character ever traveled to a place specifically to pursue one of their interests or hobbies?</li>
                                </ul>
                                <div class="long-answer">
                                    <textarea rows="4" placeholder="Please describe your character's hobbies or interests"></textarea>
                                </div>
                            </div>

                            <div class="question">
                                <p>Personal Values:</p>
                                <ul>
                                    <li>Does your character prioritize personal or professional goals?</li>
                                    <li>How important is financial success to your character?</li>
                                    <li>Does your character have a strong sense of spirituality or faith?</li>
                                    <li>Does your character have a sense of social responsibility or desire to give back to their community?</li>
                                    <li>How does your character treat others and why?</li>
                                    <li>Is your character willing to compromise their values for personal gain?</li>
                                    <li>How does your character react to injustice or unfair treatment?</li>
                                    <li>Does your character have any role models or sources of inspiration?</li>
                                    <li>How does your character handle conflicting values or beliefs with others?</li>
                                    <li>What does your character consider to be their purpose in life?</li>
                                </ul>
                                <div class="long-answer">
                                    <textarea rows="4" placeholder="Please describe your character's personal values"></textarea>
                                </div>
                            </div>

                            <div class="question">
                                <p>Culture and Background:</p>
                                <ul>
                                    <li>What cultural or ethnic background does your character come from?</li>
                                    <li>How has your character's background influenced their values or beliefs?</li>
                                    <li>Does your character have any customs or traditions they practice regularly?</li>
                                    <li>What holidays or celebrations does your character look forward to?</li>
                                    <li>How does your character identify culturally?</li>
                                    <li>What cultural traditions or practices does your character value or participate in?</li>
                                    <li>Does your character face any challenges related to their cultural identity?</li>
                                </ul>
                                <div class="long-answer">
                                    <textarea rows="4" placeholder="Please describe your character's culture and background"></textarea>
                                </div>
                            </div>

                            <div class="question">
                                <p>Future Plans:</p>
                                <ul>
                                    <li>What steps is your character taking to achieve their future goals?</li>
                                    <li>How does your character envision their ideal future?</li>
                                    <li>Are there any particular challenges or obstacles your character anticipates in achieving their future plans?</li>
                                    <li>Is your character open to new opportunities or changes in their future plans?</li>
                                    <li>Does your character have any fears or concerns about their future?</li>
                                    <li>What would be a dream achievement or accomplishment for your character in the future?</li>
                                    <li>Does your character have any backup plans in case their current plans don't work out?</li>
                                    <li>What kind of impact does your character hope to make in the world in the future?</li>
                                    <li>Does your character have any plans for retirement or later in life?</li>
                                    <li>How does your character balance their current lifestyle with their future plans and goals?</li>
                                </ul>
                                <div class="long-answer">
                                    <textarea rows="4" placeholder="Please describe your character's future plan"></textarea>
                                </div>
                            </div>



                            <!-- <label class="question" for="first-language">What is your first language?</label>
                            <div class="choices">
                                <input type="radio" id="english" name="first-language" value="English">
                                <label for="english">English</label><br>
                                <input type="radio" id="spanish" name="first-language" value="Spanish">
                                <label for="spanish">Spanish</label><br>
                                <input type="radio" id="mandarin" name="first-language" value="Mandarin">
                                <label for="mandarin">Mandarin</label><br>
                                <input type="radio" id="french" name="first-language" value="French">
                                <label for="french">French</label><br>
                                <input type="radio" id="other" name="first-language" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="first-language-other-text" name="first-language-other-text" placeholder="Please specify"></textarea>

                            </div>

                            <label class="question" for="personality">Which of these best describes your personality?</label>
                            <div class="choices">
                                <input type="radio" id="outgoing" name="personality" value="Outgoing">
                                <label for="outgoing">Outgoing</label><br>
                                <input type="radio" id="shy" name="personality" value="Shy">
                                <label for="shy">Shy</label><br>
                                <input type="radio" id="assertive" name="personality" value="Assertive">
                                <label for="assertive">Assertive</label><br>
                                <input type="radio" id="easygoing" name="personality" value="Easygoing">
                                <label for="easygoing">Easygoing</label><br>
                                <input type="radio" id="other" name="personality" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="personality-other-text" name="personality-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="communication-style">Which of these best describes your communication style?</label>
                            <div class="choices">
                                <input type="radio" id="direct" name="communication-style" value="Direct">
                                <label for="direct">Direct</label><br>
                                <input type="radio" id="indirect" name="communication-style" value="Indirect">
                                <label for="indirect">Indirect</label><br>
                                <input type="radio" id="assertive" name="communication-style" value="Assertive">
                                <label for="assertive">Assertive</label><br>
                                <input type="radio" id="passive" name="communication-style" value="Passive">
                                <label for="passive">Passive</label><br>
                                <input type="radio" id="other" name="communication-style" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="communication-style-other-text" name="communication-style-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="preferred-communication-method">What is your preferred method of communication?</label>
                            <div class="choices">
                                <input type="radio" id="face-to-face" name="preferred-communication-method" value="Face-to-face">
                                <label for="face-to-face">Face-to-face</label><br>
                                <input type="radio" id="phone" name="preferred-communication-method" value="Phone">
                                <label for="phone">Phone</label><br>
                                <input type="radio" id="text-message" name="preferred-communication-method" value="Text message">
                                <label for="text-message">Text message</label><br>
                                <input type="radio" id="email" name="preferred-communication-method" value="Email">
                                <label for="email">Email</label><br>
                                <input type="radio" id="other" name="preferred-communication-method" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="preferred-communication-method-other-text" name="preferred-communication-method-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="social-confidence-level">How would you describe your level of confidence in social situations?</label>
                            <div class="choices">
                                <input type="radio" id="very-confident" name="social-confidence-level" value="Very confident">
                                <label for="very-confident">Very confident</label><br>
                                <input type="radio" id="confident" name="social-confidence-level" value="Confident">
                                <label for="confident">Confident</label><br>
                                <input type="radio" id="average" name="social-confidence-level" value="Average">
                                <label for="average">Average</label><br>
                                <input type="radio" id="not-very-confident" name="social-confidence-level" value="Not very confident">
                                <label for="not-very-confident">Not very confident</label><br>
                                <input type="radio" id="extremely-shy" name="social-confidence-level" value="Extremely shy">
                                <label for="extremely-shy">Extremely shy</label><br>
                            </div>

                            <label class="question" for="sense-of-humor">Which of these best describes your sense of humor?</label>

                            <div class="choices">
                                <input type="radio" id="sarcastic" name="sense-of-humor" value="Sarcastic">
                                <label for="sarcastic">Sarcastic</label><br>
                                <input type="radio" id="witty" name="sense-of-humor" value="Witty">
                                <label for="witty">Witty</label><br>
                                <input type="radio" id="dry" name="sense-of-humor" value="Dry">
                                <label for="dry">Dry</label><br>
                                <input type="radio" id="self-deprecating" name="sense-of-humor" value="Self-deprecating">
                                <label for="self-deprecating">Self-deprecating</label><br>
                                <input type="radio" id="other" name="sense-of-humor" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="sense-of-humor-other-text" name="sense-of-humor-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="empathy-levels">Which of these best describes your empathy levels?</label>

                            <div class="choices">
                                <input type="radio" id="high-empathy" name="empathy-levels" value="High">
                                <label for="high-empathy">High</label><br>
                                <input type="radio" id="average-empathy" name="empathy-levels" value="Average">
                                <label for="average-empathy">Average</label><br>
                                <input type="radio" id="low-empathy" name="empathy-levels" value="Low">
                                <label for="low-empathy">Low</label><br>
                                <input type="radio" id="varying-empathy" name="empathy-levels" value="Can vary">
                                <label for="varying-empathy">Can vary</label><br>
                                <input type="radio" id="other" name="empathy-levels" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="empathy-levels-other-text" name="empathy-levels-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="patience-level">Which of these best describes your level of patience?</label>
                            <div class="choices">
                                <input type="radio" id="patience-high" name="patience-level" value="High">
                                <label for="patience-high">High</label><br>
                                <input type="radio" id="patience-average" name="patience-level" value="Average">
                                <label for="patience-average">Average</label><br>
                                <input type="radio" id="patience-low" name="patience-level" value="Low">
                                <label for="patience-low">Low</label><br>
                                <input type="radio" id="patience-impatient" name="patience-level" value="Impatient">
                                <label for="patience-impatient">Impatient</label><br>
                                <input type="radio" id="patience-other" name="patience-level" value="Other">
                                <label for="patience-other">Other:</label>
                                <textarea rows="1" class="other-text" id="patience-other-text" name="patience-level-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="optimism-level">Which of these best describes your level of optimism?</label>
                            <div class="choices">
                                <input type="radio" id="optimism-high" name="optimism-level" value="High">
                                <label for="optimism-high">High</label><br>
                                <input type="radio" id="optimism-average" name="optimism-level" value="Average">
                                <label for="optimism-average">Average</label><br>
                                <input type="radio" id="optimism-low" name="optimism-level" value="Low">
                                <label for="optimism-low">Low</label><br>
                                <input type="radio" id="optimism-realistic" name="optimism-level" value="Realistic">
                                <label for="optimism-realistic">Realistic</label><br>
                                <input type="radio" id="optimism-other" name="optimism-level" value="Other">
                                <label for="optimism-other">Other:</label>
                                <textarea rows="1" class="other-text" id="optimism-other-text" name="optimism-level-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="assertiveness-level">Which of these best describes your level of assertiveness?</label>
                            <div class="choices">
                                <input type="radio" id="extremely-assertive" name="assertiveness-level" value="Extremely assertive">
                                <label for="extremely-assertive">Extremely assertive</label><br>
                                <input type="radio" id="assertive" name="assertiveness-level" value="Assertive">
                                <label for="assertive">Assertive</label><br>
                                <input type="radio" id="average" name="assertiveness-level" value="Average">
                                <label for="average">Average</label><br>
                                <input type="radio" id="passive" name="assertiveness-level" value="Passive">
                                <label for="passive">Passive</label><br>
                                <input type="radio" id="extremely-passive" name="assertiveness-level" value="Extremely passive">
                                <label for="extremely-passive">Extremely passive</label><br>
                            </div>

                            <label class="question" for="educational-background">What is your educational background?</label>
                            <div class="choices">
                                <input type="radio" id="high-school" name="educational-background" value="High school">
                                <label for="high-school">High school</label><br>
                                <input type="radio" id="college-degree" name="educational-background" value="College degree">
                                <label for="college-degree">College degree</label><br>
                                <input type="radio" id="postgraduate-degree" name="educational-background" value="Postgraduate degree">
                                <label for="postgraduate-degree">Postgraduate degree</label><br>
                                <input type="radio" id="other" name="educational-background" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="educational-background-other-text" name="educational-background-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="work-experience">Which of these best describes your work experience?</label>
                            <div class="choices">
                                <input type="radio" id="entry-level" name="work-experience" value="Entry-level">
                                <label for="entry-level">Entry-level</label><br>
                                <input type="radio" id="mid-career" name="work-experience" value="Mid-career">
                                <label for="mid-career">Mid-career</label><br>
                                <input type="radio" id="senior-level" name="work-experience" value="Senior level">
                                <label for="senior-level">Senior level</label><br>
                                <input type="radio" id="other" name="work-experience" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="work-experience-other-text" name="work-experience-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="job-title">What is your job title?</label>
                            <div class="choices">
                                <input type="radio" id="manager" name="job-title" value="Manager">
                                <label for="manager">Manager</label><br>
                                <input type="radio" id="executive" name="job-title" value="Executive">
                                <label for="executive">Executive</label><br>
                                <input type="radio" id="salesperson" name="job-title" value="Salesperson">
                                <label for="salesperson">Salesperson</label><br>
                                <input type="radio" id="customer-service-representative" name="job-title" value="Customer service representative">
                                <label for="customer-service-representative">Customer service representative</label><br>
                                <input type="radio" id="other" name="job-title" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="job-title-other-text" name="job-title-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="age-range">What is your age range?</label>
                            <div class="choices">
                                <input type="radio" id="18-24" name="age-range" value="18-24">
                                <label for="18-24">18-24</label><br>
                                <input type="radio" id="25-34" name="age-range" value="25-34">
                                <label for="25-34">25-34</label><br>
                                <input type="radio" id="35-44" name="age-range" value="35-44">
                                <label for="35-44">35-44</label><br>
                                <input type="radio" id="45-54" name="age-range" value="45-54">
                                <label for="45-54">45-54</label><br>
                                <input type="radio" id="55-or-older" name="age-range" value="55 or older">
                                <label for="55-or-older">55 or older</label><br>
                            </div>

                            <label class="question" for="gender">What is your gender?</label>
                            <div class="choices">
                                <input type="radio" id="male" name="gender" value="Male">
                                <label for="male">Male</label><br>
                                <input type="radio" id="female" name="gender" value="Female">
                                <label for="female">Female</label><br>
                                <input type="radio" id="non-binary" name="gender" value="Non-binary">
                                <label for="non-binary">Non-binary</label><br>
                                <input type="radio" id="other" name="gender" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="gender-other-text" name="gender-other-text" placeholder="Please specify"></textarea>
                            </div>
                            <label class="question" for="marital-status">What is your marital status?</label>
                            <div class="choices">
                                <input type="radio" id="single" name="marital-status" value="Single">
                                <label for="single">Single</label><br>
                                <input type="radio" id="married" name="marital-status" value="Married">
                                <label for="married">Married</label><br>
                                <input type="radio" id="divorced" name="marital-status" value="Divorced">
                                <label for="divorced">Divorced</label><br>
                                <input type="radio" id="widowed" name="marital-status" value="Widowed">
                                <label for="widowed">Widowed</label><br>
                                <input type="radio" id="other" name="marital-status" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="other-text" name="marital-status-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="religion">What is your religion?</label>
                            <div class="choices">
                                <input type="radio" id="christian" name="religion" value="Christian">
                                <label for="christian">Christian</label><br>
                                <input type="radio" id="muslim" name="religion" value="Muslim">
                                <label for="muslim">Muslim</label><br>
                                <input type="radio" id="jewish" name="religion" value="Jewish">
                                <label for="jewish">Jewish</label><br>
                                <input type="radio" id="hindu" name="religion" value="Hindu">
                                <label for="hindu">Hindu</label><br>
                                <input type="radio" id="other" name="religion" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="other-text" name="religion-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="political-affiliation">What is your political affiliation?</label>
                            <div class="choices">
                                <input type="radio" id="democrat" name="political-affiliation" value="Democrat">
                                <label for="democrat">Democrat</label><br>
                                <input type="radio" id="republican" name="political-affiliation" value="Republican">
                                <label for="republican">Republican</label><br>
                                <input type="radio" id="independent" name="political-affiliation" value="Independent">
                                <label for="independent">Independent</label><br>
                                <input type="radio" id="other" name="political-affiliation" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="other-text" name="political-affiliation-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="cultural-background">Which of these best describes your cultural background?</label>
                            <div class="choices">
                                <input type="radio" id="american" name="cultural-background" value="American">
                                <label for="american">American</label><br>
                                <input type="radio" id="european" name="cultural-background" value="European">
                                <label for="european">European</label><br>
                                <input type="radio" id="asian" name="cultural-background" value="Asian">
                                <label for="asian">Asian</label><br>
                                <input type="radio" id="african" name="cultural-background" value="African">
                                <label for="african">African</label><br>
                                <input type="radio" id="other" name="cultural-background" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="other-text" name="cultural-background-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="socioeconomic-status">What is your socioeconomic status?</label>
                            <div class="choices">
                                <input type="radio" id="low-income" name="socioeconomic-status" value="Low income">
                                <label for="low-income">Low income</label><br>
                                <input type="radio" id="middle-income" name="socioeconomic-status" value="Middle income">
                                <label for="middle-income">Middle income</label><br>
                                <input type="radio" id="high-income" name="socioeconomic-status" value="High income">
                                <label for="high-income">High income</label><br>
                                <input type="radio" id="other" name="socioeconomic-status" value="Other">
                                <label for="other">Other:</label>
                                <textarea rows="1" class="other-text" id="other-text" name="socioeconomic-status-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="excited-response">If someone said "I'm so excited for this weekend," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="excited-a" name="excited-response" value="A">
                                <label for="excited-a">"Me too! What are your plans?"</label><br>
                                <input type="radio" id="excited-b" name="excited-response" value="B">
                                <label for="excited-b">"Why? What's happening this weekend?"</label><br>
                                <input type="radio" id="excited-c" name="excited-response" value="C">
                                <label for="excited-c">"That's nice."</label><br>
                                <input type="radio" id="excited-other" name="excited-response" value="Other">
                                <label for="excited-other">Other:</label>
                                <textarea rows="1" class="other-text" id="excited-text" name="excited-response-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="interview-response">If someone said "I'm really nervous about this interview," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="interview-a" name="interview-response" value="A">
                                <label for="interview-a">"Don't worry, you've got this!"</label><br>
                                <input type="radio" id="interview-b" name="interview-response" value="B">
                                <label for="interview-b">"Have you done any practice interviews?"</label><br>
                                <input type="radio" id="interview-c" name="interview-response" value="C">
                                <label for="interview-c">"Why are you so nervous?"</label><br>
                                <input type="radio" id="interview-other" name="interview-response" value="Other">
                                <label for="interview-other">Other:</label>
                                <textarea rows="1" class="other-text" id="interview-text" name="interview-response-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="busy-response">If someone said "I can't believe how busy I am lately," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="busy-a" name="busy-response" value="A">
                                <label for="busy-a">"I know, right? It's crazy."</label><br>
                                <input type="radio" id="busy-b" name="busy-response" value="B">
                                <label for="busy-b">"What's been keeping you so busy?"</label><br>
                                <input type="radio" id="busy-c" name="busy-response" value="C">
                                <label for="busy-c">"That's just life."</label><br>
                                <input type="radio" id="busy-other" name="busy-response" value="Other">
                                <label for="busy-other">Other:</label>
                                <textarea rows="1" class="other-text" id="busy-text" name="busy-response-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="not-well-response">If someone said "I'm not feeling very well today," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="not-well-a" name="not-well-response" value="A">
                                <label for="not-well-a">"Oh no! Is there anything I can do to help?"</label><br>
                                <input type="radio" id="not-well-b" name="not-well-response" value="B">
                                <label for="not-well-b">"Why? What's going on?"</label><br>
                                <input type="radio" id="not-well-c" name="not-well-response" value="C">
                                <label for="not-well-c">"That's too bad."</label><br>
                                <input type="radio" id="not-well-other" name="not-well-response" value="Other">
                                <label for="not-well-other">Other:</label>
                                <textarea rows="1" class="other-text" id="not-well-text" name="not-well-response-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="bored-response">If someone said "I'm so bored right now," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="bored-a" name="bored-response" value="A">
                                <label for="bored-a">"Do you want to do something fun?"</label><br>
                                <input type="radio" id="bored-b" name="bored-response" value="B">
                                <label for="bored-b">"Why don't you try picking up a new hobby?"</label><br>
                                <input type="radio" id="bored-c" name="bored-response" value="C">
                                <label for="bored-c">"That's too bad."</label><br>
                                <input type="radio" id="bored-other" name="bored-response" value="Other">
                                <label for="bored-other">Other:</label>
                                <textarea rows="1" class="other-text" id="bored-text" name="bored-response-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="stressed-response">If someone said "I'm really stressed out right now," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="stressed-a" name="stressed-response" value="A">
                                <label for="stressed-a">"I'm sorry to hear that. Want to talk about it?"</label><br>
                                <input type="radio" id="stressed-b" name="stressed-response" value="B">
                                <label for="stressed-b">"Have you tried any stress-relieving techniques?"</label><br>
                                <input type="radio" id="stressed-c" name="stressed-response" value="C">
                                <label for="stressed-c">"That's just how life is, unfortunately."</label><br>
                                <input type="radio" id="stressed-other" name="stressed-response" value="Other">
                                <label for="stressed-other">Other:</label>
                                <textarea rows="1" class="other-text" id="stressed-text" name="stressed-response-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="tired-reply">If someone said "I'm so tired today," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="tired-reply-a" name="tired-reply" value="I know the feeling. Did you get enough sleep?">
                                <label for="tired-reply-a">I know the feeling. Did you get enough sleep?</label><br>
                                <input type="radio" id="tired-reply-b" name="tired-reply" value="Why are you so tired?">
                                <label for="tired-reply-b">Why are you so tired?</label><br>
                                <input type="radio" id="tired-reply-c" name="tired-reply" value="That's too bad.">
                                <label for="tired-reply-c">That's too bad.</label><br>
                                <input type="radio" id="tired-reply-other" name="tired-reply" value="Other">
                                <label for="tired-reply-other">Other:</label>
                                <textarea rows="1" class="other-text" id="tired-reply-other-text" name="tired-reply-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="lonely-reply">If someone said "I'm feeling really lonely lately," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="lonely-reply-a" name="lonely-reply" value="I'm sorry to hear that. Want to hang out sometime?">
                                <label for="lonely-reply-a">I'm sorry to hear that. Want to hang out sometime?</label><br>
                                <input type="radio" id="lonely-reply-b" name="lonely-reply" value="Have you tried joining any clubs or groups?">
                                <label for="lonely-reply-b">Have you tried joining any clubs or groups?</label><br>
                                <input type="radio" id="lonely-reply-c" name="lonely-reply" value="That's just life.">
                                <label for="lonely-reply-c">That's just life.</label><br>
                                <input type="radio" id="lonely-reply-other" name="lonely-reply" value="Other">
                                <label for="lonely-reply-other">Other:</label>
                                <textarea rows="1" class="other-text" id="lonely-reply-other-text" name="lonely-reply-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="angry-reply">If someone said "I'm really angry about this situation," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="angry-reply-a" name="angry-reply" value="I understand why that would make you angry. What are you going to do about it?">
                                <label for="angry-reply-a">I understand why that would make you angry. What are you going to
                                    do about it?</label><br>
                                <input type="radio" id="angry-reply-b" name="angry-reply" value="Why are you so angry?">
                                <label for="angry-reply-b">Why are you so angry?</label><br>
                                <input type="radio" id="angry-reply-c" name="angry-reply" value="That's too bad.">
                                <label for="angry-reply-c">That's too bad.</label><br>
                                <input type="radio" id="angry-reply-other" name="angry-reply" value="Other">
                                <label for="angry-reply-other">Other:</label>
                                <textarea rows="1" class="other-text" id="angry-reply-other-text" name="angry-reply-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="proud-reply">If someone said "I'm really proud of myself for accomplishing this," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="proud-reply-a" name="proud-reply" value="Congratulations! That's awesome.">
                                <label for="proud-reply-a">Congratulations! That's awesome.</label><br>
                                <input type="radio" id="proud-reply-b" name="proud-reply" value="Why are you so proud of yourself?">
                                <label for="proud-reply-b">Why are you so proud of yourself?</label><br>
                                <input type="radio" id="proud-reply-c" name="proud-reply" value="That's nice.">
                                <label for="proud-reply-c">That's nice.</label><br>
                                <input type="radio" id="proud-reply-other" name="proud-reply" value="Other">
                                <label for="proud-reply-other">Other:</label>
                                <textarea rows="1" class="other-text" id="proud-reply-other-text" name="proud-reply-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="overwhelmed-reply">If someone said "I'm feeling really overwhelmed right now," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="overwhelmed-reply-a" name="overwhelmed-reply" value="I'm sorry to hear that. Want to talk about it?">
                                <label for="overwhelmed-reply-a">I'm sorry to hear that. Want to talk about it?</label><br>
                                <input type="radio" id="overwhelmed-reply-b" name="overwhelmed-reply" value="Have you tried breaking things down into smaller tasks?">
                                <label for="overwhelmed-reply-b">Have you tried breaking things down into smaller
                                    tasks?</label><br>
                                <input type="radio" id="overwhelmed-reply-c" name="overwhelmed-reply" value="That's just life.">
                                <label for="overwhelmed-reply-c">That's just life.</label><br>
                                <input type="radio" id="overwhelmed-reply-other" name="overwhelmed-reply" value="Other">
                                <label for="overwhelmed-reply-other">Other:</label>
                                <textarea rows="1" class="other-text" id="overwhelmed-reply-other-text" name="overwhelmed-reply-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="bored-reply">If someone said "I'm really bored at work today," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="bored-reply-a" name="bored-reply" value="What do you usually do to pass the time?">
                                <label for="bored-reply-a">What do you usually do to pass the time?</label><br>
                                <input type="radio" id="bored-reply-b" name="bored-reply" value="Have you tried asking your boss for more challenging tasks?">
                                <label for="bored-reply-b">Have you tried asking your boss for more challenging
                                    tasks?</label><br>
                                <input type="radio" id="bored-reply-c" name="bored-reply" value="That's too bad.">
                                <label for="bored-reply-c">That's too bad.</label><br>
                                <input type="radio" id="bored-reply-other" name="bored-reply" value="Other">
                                <label for="bored-reply-other">Other:</label>
                                <textarea rows="1" class="other-text" id="bored-reply-other-text" name="bored-reply-other-text" placeholder="Please specify"></textarea>
                            </div>
                            <label class="question" for="anxious-about-meeting">If someone said "I'm really anxious about this meeting," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="anxious-a" name="anxious-about-meeting" value="A">
                                <label for="anxious-a">"I'm sure you'll do great. What are you worried about?"</label><br>
                                <input type="radio" id="anxious-b" name="anxious-about-meeting" value="B">
                                <label for="anxious-b">"Have you prepared enough for the meeting?"</label><br>
                                <input type="radio" id="anxious-c" name="anxious-about-meeting" value="C">
                                <label for="anxious-c">"That's too bad."</label><br>
                                <input type="radio" id="anxious-other" name="anxious-about-meeting" value="Other">
                                <label for="anxious-other">Other:</label>
                                <textarea rows="1" class="other-text" id="anxious-other-text" name="anxious-about-meeting-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="happy-with-life">If someone said "I'm really happy with how my life is going right now," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="happy-a" name="happy-with-life" value="A">
                                <label for="happy-a">"That's great! What's been going well for you?"</label><br>
                                <input type="radio" id="happy-b" name="happy-with-life" value="B">
                                <label for="happy-b">"Why are you so happy with your life right now?"</label><br>
                                <input type="radio" id="happy-c" name="happy-with-life" value="C">
                                <label for="happy-c">"That's nice."</label><br>
                                <input type="radio" id="happy-other" name="happy-with-life" value="Other">
                                <label for="happy-other">Other:</label>
                                <textarea rows="1" class="other-text" id="happy-other-text" name="happy-with-life-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="frustrated-by-situation">If someone said "I'm really frustrated by this situation," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="frustrated-a" name="frustrated-by-situation" value="A">
                                <label for="frustrated-a">"I understand why you'd feel frustrated. Have you tried talking to anyone about it?"</label><br>
                                <input type="radio" id="frustrated-b" name="frustrated-by-situation" value="B">
                                <label for="frustrated-b">"Why are you so frustrated?"</label><br>
                                <input type="radio" id="frustrated-c" name="frustrated-by-situation" value="C">
                                <label for="frustrated-c">"That's too bad."</label><br>
                                <input type="radio" id="frustrated-other" name="frustrated-by-situation" value="Other">
                                <label for="frustrated-other">Other:</label>
                                <textarea rows="1" class="other-text" id="frustrated-other-text" name="frustrated-by-situation-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="excited-for-restaurant">If someone said "I'm really excited to try this new restaurant," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="excited-a" name="excited-for-restaurant" value="A">
                                <label for="excited-a">"Me too! What are you most excited to try?"</label><br>
                                <input type="radio" id="excited-b" name="excited-for-restaurant" value="B">
                                <label for="excited-b">"Why are you so excited about this restaurant?"</label><br>
                                <input type="radio" id="excited-c" name="excited-for-restaurant" value="C">
                                <label for="excited-c">"That's nice."</label><br>
                                <input type="radio" id="excited-other" name="excited-for-restaurant" value="Other">
                                <label for="excited-other">Other:</label>
                                <textarea rows="1" class="other-text" id="excited-other-text" name="excited-for-restaurant-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="feeling-down">If someone said "I'm feeling really down lately," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="down-a" name="feeling-down" value="A">
                                <label for="down-a">"I'm sorry to hear that. What's been going on?"</label><br>
                                <input type="radio" id="down-b" name="feeling-down" value="B">
                                <label for="down-b">"Have you tried doing anything to make yourself feel
                                    better?"</label><br>
                                <input type="radio" id="down-c" name="feeling-down" value="C">
                                <label for="down-c">"That's just life."</label><br>
                                <input type="radio" id="down-other" name="feeling-down" value="Other">
                                <label for="down-other">Other:</label>
                                <textarea rows="1" class="other-text" id="down-other-text" name="feeling-down-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="looking-forward-to-summer">If someone said "I'm really looking forward to summer," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="summer-a" name="looking-forward-to-summer" value="A">
                                <label for="summer-a">"Me too! What do you have planned?"</label><br>
                                <input type="radio" id="summer-b" name="looking-forward-to-summer" value="B">
                                <label for="summer-b">"Why are you so excited about summer?"</label><br>
                                <input type="radio" id="summer-c" name="looking-forward-to-summer" value="C">
                                <label for="summer-c">"That's nice."</label><br>
                                <input type="radio" id="summer-other" name="looking-forward-to-summer" value="Other">
                                <label for="summer-other">Other:</label>
                                <textarea rows="1" class="other-text" id="summer-other-text" name="looking-forward-to-summer-other-text" placeholder="Please specify"></textarea>
                            </div>

                            <label class="question" for="optimistic-about-future">If someone said "I'm feeling really optimistic about the future," how would you reply?</label>
                            <div class="choices">
                                <input type="radio" id="optimistic-a" name="optimistic-about-future" value="A">
                                <label for="optimistic-a">"That's great! What are you most optimistic about?"</label><br>
                                <input type="radio" id="optimistic-b" name="optimistic-about-future" value="B">
                                <label for="optimistic-b">"Why are you so optimistic?"</label><br>
                                <input type="radio" id="optimistic-c" name="optimistic-about-future" value="C">
                                <label for="optimistic-c">"That's nice."</label><br>
                                <input type="radio" id="optimistic-other" name="optimistic-about-future" value="Other">
                                <label for="optimistic-other">Other:</label>
                                <textarea rows="1" class="other-text" id="optimistic-other-text" name="optimistic-about-future-other-text" placeholder="Please specify"></textarea>
                            </div> -->

                            <button type="submit" id="survey-submit-btn">Submit</button>
                        </form>
                        <div id="warning-modal">
                            <div class="warning-modal-content">
                                <span id="warning-close-btn" class="warning-modal-close">&times;</span>
                                <h3 class="warning-modal-title">Warning!!</h3>
                                <p class="warning-modal-text">Once you submit, you can no longer change your answers.</p>
                                <div class="warning-modal-buttons">
                                    <button id="warning-cancel-btn">Cancel</button>
                                    <button id="warning-submit-btn">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="roleplay page" id="a104">
                <div class="chat-messages">
                    <div class="roleplay-header">
                        <!-- <h1>李明</h1>
                        <p>一名学习商业管理专业的大学生</p> -->
                        <h1>Li Ming</h1>
                        <p>a university student studying business management</p>
                    </div>
                    <div class="chatbot-message-container">
                        <div class="message-headshot">
                            <img src="{% static 'images/default-head.png' %}" alt="default-head">
                        </div>
                        <div class="chatbot-message">
                            <p>Hello, my name is Li Ming. I am 21 years old and come from Beijing, China. I am a university student studying business management at the University of Southern California in Los Angeles. My family has always placed a great emphasis on education and encouraged me to pursue academic goals. In my free time, I enjoy playing the piano, reading novels, and exploring new restaurants. I consider myself to be ambitious, organized, and friendly. Studying in the United States has been a challenging but rewarding experience for me. After graduation, I plan to return to China and join my family's real estate development company, hoping to use my education and international experience to contribute to the company's growth and expansion into new markets.</p>
                            <!-- <p>你好，我叫李明，今年21岁，来自中国北京。我是一名大学生，在美国加州洛杉矶的南加州大学学习商业管理专业。我从小家庭就非常重视教育，鼓励我追求学业目标。闲暇时，我喜欢弹钢琴、读小说和探索新餐厅。我认为自己性格上比较有野心、有条理并且友好。在美国留学是对我来说一个充满挑战但值得的经历。毕业后，我计划回到中国加入家里的房地产开发公司，希望能利用我所学和国际经验为公司的增长和进入新市场做出贡献。</p> -->
                        </div>
                    </div>
                    <div class="end-message"></div>
                </div>
                <div class="chatbot-input">
                    <textarea rows="1" placeholder="Type your message..."></textarea>
                    <button>Send</button>
                </div>
            </div>
            <div class="roleplay page" id="a105">
                <div class="chat-messages">
                    <div class="roleplay-header">
                        <h1>Avery Kim</h1>
                        <p>a graphic designer based in New York City</p>
                    </div>
                    <div class="chatbot-message-container">
                        <div class="message-headshot">
                            <img src="{% static 'images/default-head.png' %}" alt="default-head">
                        </div>
                        <div class="chatbot-message">
                            <p>Hi, my name is Avery Kim. I am a graphic designer based in New York City. I am a creative and curious person who values empathy, independence, and perseverance. As someone who grew up in a collectivist culture, I believe in the importance of group harmony and treating others with kindness and respect. In my free time, I enjoy painting, drawing, and exploring different neighborhoods in the city. I am also passionate about advocating for better mental health services for survivors of crime, having overcome my own struggles with PTSD. I am excited to continue growing my business and working on projects that have a positive impact on society.</p>
                        </div>
                    </div>
                    <div class="end-message"></div>
                </div>
                <div class="chatbot-input">
                    <textarea rows="1" placeholder="Type your message..."></textarea>
                    <button>Send</button>
                </div>
            </div>
        </div>
        <div id="edit" class="edit-container container" style="display: none;">
            <div class="edit page" id="a103">
                <div class="edit-messages">
                    <div class="edit-header">
                        <h1>Edit</h1>
                        <p>Your friendly AI editbot</p>
                    </div>
                    <div class="chatbot-message-container">
                        <div class="message-headshot">
                            <img src="{% static 'images/default-head.png' %}" alt="default-head">
                        </div>
                        <div class="chatbot-message">
                            <p>Hello! How can I assist you today?</p>
                        </div>
                    </div>
                    <div class="end-message"></div>
                </div>
                <div class="edit-input">
                    <textarea class="input" rows="1" placeholder="Type your input..."></textarea>
                    <textarea class="instruction" rows="1" placeholder="Type your instruction..."></textarea>
                    <button>Send</button>
                </div>
            </div>
        </div>
    </div>
    <!-- <footer>
        <p>&copy; 2023 My Website. All rights reserved.</p>
    </footer> -->
    <script type="module" src="{% static 'js/helpers.js' %}"></script>
    <script type="module" src="{% static 'js/character.js' %}"></script>
    <script type="module" src="{% static 'js/memory.js' %}"></script>
    <script type="module" src="{% static 'js/messageHistory.js' %}"></script>
    <script type="module" src="{% static 'js/script.js' %}"></script>
    <script type="module" src="{% static 'js/chat.js' %}"></script>
    <script type="module" src="{% static 'js/edit.js' %}"></script>
    <script type="module" src="{% static 'js/roleplay.js' %}"></script>
    <script type="module" src="{% static 'js/initialize.js' %}"></script>
</body>

</html>