setup for challenge explanations and hints
<div class="container" layout:fragment="content">
<!--/*@thymesVar id="challenge" type="org.owasp.wrongsecrets.challenges.ChallengeUI"*/-->
<h1 class="mt-2" th:text="${challenge.name}"/>
- <p th:text="'Welcome to challenge ' + ${challenge.challengeNumber} + '. You need to guess the secret that is hidden in Java, Docker, Kubernetes, Vault, AWS or GCP.'"></p>
+ <p><span th:text="'Welcome to challenge ' + ${challenge.challengeNumber} + '.'"></span> You need to guess the secret
+ that is hidden in <a href="https://github.com/commjoen/wrongsecrets">Java</a>, <a
+ href="https://hub.docker.com/r/jeroenwillemsen/wrongsecrets">Docker</a>, Kubernetes, Vault, AWS or GCP.</p>
<div class="row">
<div class="offset-lg-1 col-lg-10 col-md-12">
<div th:replace="doc:__${challenge.explanation}__.adoc"></div>
</div>
-
</div>
<div th:text="${challengeCompletedAlready}"></div>
<p>
<button class="btn btn-primary" type="submit" name="action" value="submit">Submit</button>
<button class="btn btn-secondary" type="submit" name="action" value="reset">Reset</button>
+
+ <a class="btn btn-secondary" data-bs-toggle="collapse" href="#collapseHint" role="button"
+ aria-expanded="false" aria-controls="collapseHint">
+ Show hints
+ </a>
+ <a class="btn btn-secondary" data-bs-toggle="collapse" href="#collapseExplain" role="button"
+ aria-expanded="false" aria-controls="collapseExplain">
+ What's wrong?
+ </a>
</p>
+ <div class="collapse" id="collapseHint">
+ <div class="card card-body">
+ Here we provide hints
+ </div>
+ </div>
+ <div class="collapse" id="collapseExplain">
+ <div class="card card-body">
+ Here we explain
+ </div>
+ </div>
</form>
<div th:replace="fragments/navigation :: navigation"></div>
