{% extends 'students/base.html' %}
{% block content %}
<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

  body {
    background: #f4f6f8;
    font-family: 'Roboto', sans-serif;
    color: #212121;
  }

  .exam-container {
    max-width: 800px;
    margin: 40px auto;
    background: #fff;
    padding: 32px 36px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .question-count {
    font-size: 16px;
    font-weight: 500;
    color: #616161;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .question-text {
    font-size: 20px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 24px;
  }

  .form-check {
    margin-bottom: 12px;
  }

  .form-check-input {
    margin-right: 10px;
    accent-color: #1976d2;
  }

  .form-check-label {
    font-size: 16px;
    color: #424242;
    cursor: pointer;
  }

  .form-select,
  .form-control,
  textarea {
    font-size: 16px;
    width: 100%;
    padding: 12px 14px;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #fafafa;
    transition: border-color 0.3s;
  }

  .form-select:focus,
  .form-control:focus,
  textarea:focus {
    outline: none;
    border-color: #1976d2;
    background-color: #fff;
  }

  textarea {
    resize: vertical;
    min-height: 150px;
    font-family: monospace;
  }

  .code-block {
    background-color: #f1f3f4;
    padding: 12px 16px;
    border-radius: 6px;
    font-family: monospace;
    white-space: pre-wrap;
    color: #37474f;
    border-left: 4px solid #90caf9;
    margin-top: 8px;
  }

  .nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
  }

  .nav-buttons button {
    min-width: 120px;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .btn-secondary {
    background-color: #e0e0e0;
    color: #424242;
  }

  .btn-secondary:hover {
    background-color: #d6d6d6;
  }

  .btn-primary {
    background-color: #1976d2;
    color: #fff;
  }

  .btn-primary:hover {
    background-color: #1565c0;
  }

  .btn-success {
    background-color: #2e7d32;
    color: #fff;
  }

  .btn-success:hover {
    background-color: #1b5e20;
  }

  .btn-secondary:disabled {
    background-color: #eeeeee;
    color: #9e9e9e;
    cursor: not-allowed;
  }

  .alert {
    background-color: #ffebee;
    color: #c62828;
    padding: 14px;
    border-left: 4px solid #f44336;
    margin-bottom: 16px;
    border-radius: 6px;
    font-size: 15px;
  }
</style>

<div class="exam-container">
  <div class="question-count">Question {{ index }} of {{ total }}</div>

  {% if error %}
    <div class="alert">{{ error }}</div>
  {% endif %}

  <form method="post">
    {% csrf_token %}
    <p class="question-text">{{ question.question }}</p>

    {% if question.type == 'mcqs' %}
      {% for option in question.options %}
        <div class="form-check">
          <input class="form-check-input" type="radio" name="answer" id="option{{ forloop.counter }}" value="{{ option }}" {% if selected == option %}checked{% endif %} required>
          <label class="form-check-label" for="option{{ forloop.counter }}">{{ option }}</label>
        </div>
      {% endfor %}

    {% elif question.type == 'blanks' %}
      {% if question.options %}
        <select name="answer" class="form-select" required>
          <option value="" disabled {% if not selected %}selected{% endif %}>-- Select your answer --</option>
          {% for option in question.options %}
            <option value="{{ option }}" {% if selected == option %}selected{% endif %}>{{ option }}</option>
          {% endfor %}
        </select>
      {% else %}
        <input type="text" name="answer" class="form-control" value="{{ selected }}" placeholder="Type your answer..." required>
      {% endif %}

    {% elif question.type == 'coding' %}
      <textarea name="answer" class="resizable-box" placeholder="Type your answer...">{{ selected }}</textarea>
      {% if question.sample_input or question.sample_output %}
        <div class="mt-3">
          {% if question.sample_input %}
            <p><strong>Sample Input:</strong></p>
            <div class="code-block">{{ question.sample_input }}</div>
          {% endif %}
          {% if question.sample_output %}
            <p><strong>Sample Output:</strong></p>
            <div class="code-block">{{ question.sample_output }}</div>
          {% endif %}
        </div>
      {% endif %}

    {% else %}
      <input type="text" name="answer" class="form-control" value="{{ selected }}" placeholder="Enter your answer" required>
    {% endif %}

    <div class="nav-buttons">
      <button type="submit" name="action" value="prev" class="btn btn-secondary" {% if index == 1 %}disabled{% endif %}>Previous</button>
      {% if index < total %}
        <button type="submit" name="action" value="next" class="btn btn-primary">Next</button>
      {% else %}
        <button type="submit" name="action" value="submit" class="btn btn-success">Submit</button>
      {% endif %}
    </div>
  </form>
</div>
{% endblock %}
 this is exam.html give me updated code by adding those script