{{ extends "global/Page.html" }}
{{ block title }}Questions{{ endblock }}

{{ block content }}

<div style="max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; border-radius: 8px;">
  <h6 style="text-align: center; margin-bottom: 20px;">Please answer the following questions
    about how engaged you felt with the narrative and how you perceived the main character.</h6>

  <p><b>Scale:</b> 1 = not at all, 7 = very much.</p>

  {{ formfield 'transport_1' }}
  {{ formfield 'transport_2' }}
  {{ formfield 'transport_3' }}
  {{ formfield 'transport_4' }}
  {{ formfield 'transport_5' }}
  {{ formfield 'transport_6' }}
  {{ formfield 'char_image_vivid' }}
</div>

<div style="max-width: 600px; margin: 10px auto 0 auto;">
  <div style="padding: 10px; background-color: #f9f9f9; border-radius: 6px; margin-bottom: 10px;">
    {{ formfield 'char_good_bad' }}
  </div>
  <div style="padding: 10px; background-color: #f9f9f9; border-radius: 6px; margin-bottom: 10px;">
    {{ formfield 'char_pleasant_unpleasant' }}
  </div>
  <div style="padding: 10px; background-color: #f9f9f9; border-radius: 6px; margin-bottom: 10px;">
    {{ formfield 'char_attractive_unattractive' }}
  </div>
  <div style="padding: 10px; background-color: #f9f9f9; border-radius: 6px;">
    {{ formfield 'char_responsible_irresponsible' }}
  </div>
</div>

<button type="submit" class="submit-btn">Next</button>

<style>
    .submit-btn {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        font-size: 1.2em;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .submit-btn:hover {
        background-color: #45a049;
    }
</style>

{{ endblock }}