_static/html/instruction_page.html

<div style="font-family: Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: auto; padding: 20px; background-color: #f9f9f9; border-radius: 10px;"></div>
    <h2 style="color: #2c3e50; text-align: center;">Welcome to the Experiment</h2>
    <p style=" color: #34495e; text-align: center;">Please read the instructions carefully before beginning.</p>

    <p style=" color: #34495e;">
        In this experiment, you will role-play as a user profile and decide whether to purchase a stock by interacting with a financial advisor over five candidate stocks. 
    </p>

    <div style="background-color: #eaf7f7; padding: 15px; border-left: 5px solid #17a2b8; margin-bottom: 20px;">
        <strong>Step 1: Preference Elicitation Stage</strong>
        <p>
            During this stage, financial advisors will ask you a series of questions to gather insights into your investment preferences and needs. The information you provide will be used to guide the discussions and decisions in the subsequent stages. You will be assigned a user narrative that describes an investor interested in buying individual stocks but unsure of which to choose. <strong>Review the narrative thoroughly and role-play as the investor described.</strong>
        </p>
    </div>

    <div style="background-color: #f2f5ff; padding: 15px; border-left: 5px solid #6c63ff; margin-bottom: 20px;">
        <strong>Step 2: Financial Decision Stage</strong>
        <p>
            You will go through five rounds of financial decisions. Each round consists of a “Discussion (Discuss)” and an “Evaluation (Eval)” phase. Please move through the following sequence: 1-1: Discuss → 1-2: Eval → 2-1: Discuss → 2-2: Eval → … → 5-2: Eval.
        </p>
        <div style="margin-left: 20px;">
            <h4 style="color: #6c63ff;">Discussion Phase (e.g., 1-1: Discuss)</h4>
            <p style=" color: #34495e;">
                You will receive general instructions and information about the candidate stock. After understanding the instructions, engage with the AI financial advisor to make financial decisions. <strong>Once you feel that you have gathered enough information to make a financial decision, you can move on to the evaluation phase.</strong>
            </p>

            <h4 style="color: #6c63ff;">Evaluation Phase (e.g., 1-2: Eval)</h4>
            <p style=" color: #34495e;">
                Once you feel informed, switch to the Evaluation tab and complete your evaluation for the stock.
            </p>

            <h4 style="color: #6c63ff;">Next Round (e.g., 2-1: Discuss)</h4>
            <p style=" color: #34495e;">
                After completing the evaluation for one stock, move to the next stock tab and repeat the process. Continue until all five stocks have been evaluated.
            </p>
        </div>
    </div>

    <div style="background-color: #fff8e1; padding: 15px; border-left: 5px solid #ffc107; margin-bottom: 20px;">
        <strong>Step 3: Final Evaluation</strong>
        <p style=" color: #34495e;">
            Based on your conversations with your financial advisor, you will rank the individual stocks according to your desire to invest in each one. 
            <strong>Assign a unique rank to each stock</strong> (1 being the most preferred, 5 being the least preferred).
        </p>
    </div>
    <!-- Cautionary Guidelines -->
    <div style="background-color: #fdecea; padding: 15px; border-left: 5px solid #e74c3c; margin-top: 20px;">
        <h4 style="color: #e74c3c;">Cautionary Guidelines</h4>
        <ul style="color: #34495e;">
            <li>Do not <strong>refresh</strong> or <strong>reload</strong> the page. Doing so will result in <strong>loss of data</strong>, and you will have to <strong>restart the experiment</strong> from the beginning.</li>
            <li>Please move through the following sequence: <strong>Experiment Instruction</strong> → <strong>Preference Elicitation Stage</strong> → <strong>Financial Decision Stage</strong> → <strong>Final Evaluation</strong>.</li>
        </ul>
    </div>