templates/template_html.j2

<b>Instructions</b>:
<span style="color: green;">Use the following pieces of context to answer the question at the end.<br>If you don't know the answer, just say that you don't know, <span style="color: green; font-weight: bold;">don't try to make up an answer.</span></span><br>

<b>Context</b>:
{% for doc in documents %}
    <div id="box{{ loop.index }}" class="doc-box">
        <div class="doc-label"><b>Doc {{ loop.index }}</b></div>
        <span id="doc{{ loop.index }}-short" class="doc-short">{{ doc.content[:50] }}...</span>
        <span id="doc{{ loop.index }}-full" class="doc-full">{{ doc.content }}</span>
    </div>
{% endfor %}
<b>Query</b>: <span style="color: yellow;">{{ query }}</span>

<style>
    .doc-box {
        border: 2px solid #aaa;
        padding: 10px;
        margin-top: 10px;
        border-radius: 5px;
        background-color: #1E90FF;
        position: relative;
        cursor: pointer;
    }
    .doc-label {
        font-size: 0.8em;
        position: absolute;
        top: 10px;
        left: 10px;
    }
    .doc-short, .doc-full {
        color: white;
        display: block;
        margin-top: 20px;
    }
    .doc-full {
        display: none;
    }
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    {% for doc in documents %}
        document.getElementById("box{{ loop.index }}").addEventListener("click", function() {
            toggleContent('doc{{ loop.index }}');
        });
    {% endfor %}
});

function toggleContent(docID) {
    var shortContent = document.getElementById(docID + '-short');
    var fullContent = document.getElementById(docID + '-full');
    if (fullContent.style.display === 'none') {
        shortContent.style.display = 'none';
        fullContent.style.display = 'block';
    } else {
        shortContent.style.display = 'block';
        fullContent.style.display = 'none';
    }
}
</script>