=== Step 3: Write glue html page

We mentioned a lesson can consist of multiple assignments, WebGoat picks them up automatically and the UI displays
a navigation bar on top of every lesson. A page with an assignment will be red in the beginning and will become
green when the user solves the assignment. To make this work in the html we need to add:

[source]
----
<html xmlns:th="http://www.thymeleaf.org">

  <div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="doc:lesson-template-intro.adoc"></div>
  </div>
  <div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="doc:lesson-template-content.adoc"></div>
  </div>
  <div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="doc:lesson-template-lesson-class.adoc"></div>
  </div>
</html>
----

This file needs to be places in: `{lesson}/src/main/resources/html/`. The name of the file should be the same as
the Java class we created in step 2.

This will create 3 separate pages (navigation bar) with the adoc pages we created to create this lesson.

That's it we create a basic lesson with only content. To make it all work you need to make the lesson available in
WebGoat.

==== Create pom.xml

See the `pom.xml` of this project copy it to your new lesson and change the name.

==== Extend lesson project

Change the file in `webgoat-lesson/pom.xml` and add:

[source]
----
<module>new-lesson</module>
----
inside the existing `<modules>` tag.

==== Add project to WebGoat

Next step is to add a reference to the new project so WebGoat bundles it while building, open `pom.xml` in `webgoat-server/pom.xml`
and add:

[source]
----
<dependency>
  <groupId>org.owasp.webgoat.lesson</groupId>
  <artifactId>new-lesson</artifactId>
  <version>${project.version}</version>
</dependency>
----

That's it start WebGoat and your lesson will appear in the menu.
