I am in the process of creating a web app for a small CTF that will be held at my school. I have designed a webpage to display the problems, but currently they are all lined up in a long row.
This is how it's set up:
<body class="main-body">
<div class="body">
<section class="content">
<div class="container-asdf"> <!-- This is a grid, assume that this particular element is repeated several times with changes -->
<div class="item-a">Test Problem</div>
<div class="item-b">Category: Test, Problem</div>
<div class="item-c"><button data-toggle="modal" data-target="#exampleModal" type="button" class="btn btn-info">Button</button></div>
</div>
</section>
</div>
</body>
(I acknowledge that this HTML may not be the most efficient, but it is what I have at the moment)
The div with class "container-asdf" is generated automatically based on the number of problems. Let's say it generates 50 problems, but I only want to display 10 at a time and split them into pages without creating multiple HTML files. How can I achieve this without writing lots of code? My initial idea was to hide some containers and show them as different numbers are selected, which is why I am looking into pagination.
To sum up: I need to display many elements on one page, limit them, and separate them into pages without using multiple HTML files. The HTML is being generated by Flask/Jinja. Any guidance would be appreciated!
Thank you for your assistance!