{{ block title }}
    Label
{{ endblock }}
{{ block content }}

<!-- Display the description -->
<pre id="content">
    {{des}}
</pre>

<h3>Task</h3>
<ul>
    <li>Find all sponsors of the video, e.g.: XXX</li>
    <li>If multiple sponsors occur, please divide them with ";"</li>
    <li>for example: A; B; C</li>
    <li>If no sponsors, please type <b>None</b></li>
</ul>

    {{ formfields }}

    <br>

    {{ next_button }}

<style>
    pre {
        white-space: pre-wrap; /* Allows the text to wrap */
        word-wrap: break-word; /* Allows unbreakable words to be broken */
        width: 80%; /* Optional: Sets the width to 80% of the parent container */
        max-width: 800px; /* Optional: Sets the maximum width to 800px */
    }
    .highlight {
            color: red;
        }
</style>

<script>
    // Get the pre element by its ID
    const preElement = document.getElementById("content");

    // Get the text content
    const text = preElement.textContent;

    // Use regex to replace 'sponsor' with the highlighted version
    const highlightedText = text.replace(/sponsor/g, '<span class="highlight">sponsor</span>');

    // Update the pre element's inner HTML
    preElement.innerHTML = highlightedText;
</script>


{{ endblock }}