diff --git a/_navbar.html b/_navbar.html
index 0842598..78bd908 100644
--- a/_navbar.html
+++ b/_navbar.html
@@ -23,6 +23,7 @@
- Intro
- HowTo
+ - ES 0
- ES 1
- ES 2
- ES 3
diff --git a/assets/html/removeSolution.html b/assets/html/removeSolution.html
index 7911e7c..2e2ecf4 100644
--- a/assets/html/removeSolution.html
+++ b/assets/html/removeSolution.html
@@ -1 +1,2 @@
+
diff --git a/assets/img/bat.svg b/assets/img/bat.svg
new file mode 100644
index 0000000..d98348c
--- /dev/null
+++ b/assets/img/bat.svg
@@ -0,0 +1,106 @@
+
+
+
+
diff --git a/assets/img/pumpkin.svg b/assets/img/pumpkin.svg
new file mode 100644
index 0000000..a2b0b8b
--- /dev/null
+++ b/assets/img/pumpkin.svg
@@ -0,0 +1,156 @@
+
+
+
+
diff --git a/assets/img/witch.svg b/assets/img/witch.svg
new file mode 100644
index 0000000..a8817f7
--- /dev/null
+++ b/assets/img/witch.svg
@@ -0,0 +1,206 @@
+
+
+
diff --git a/assets/js/recursions.js b/assets/js/recursions.js
new file mode 100644
index 0000000..db1cac7
--- /dev/null
+++ b/assets/js/recursions.js
@@ -0,0 +1,183 @@
+
+function getRandomNumber(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+function createArray(table, size, name) {
+ // Create a table element
+
+ // Create a table row (the header row)
+ var headrow = table.insertRow(0)
+ var row = table.insertRow(1)
+ row.id = name
+
+
+ // Add header cells with integers from 0 to 10
+ for (var i = 0; i <= size; i++) {
+ td = document.createElement('td');
+ th = document.createElement('th')
+
+ var input = document.createElement("input");
+ input.type = "number";
+ input.id = name + i;
+ input.style.backgroundColor = "transparent"
+ td.appendChild(input);
+ row.appendChild(td)
+ th = document.createElement('th');
+ var subscript = document.createElement('sub');
+ th.textContent = "a";
+ subscript.textContent = i;
+ th.appendChild(subscript);
+ headrow.appendChild(th);
+
+ }
+
+}
+
+function accessArray(arrayName) {
+ var tableRow = document.getElementById(arrayName);
+ var rowDataArray = [];
+
+ // Iterate through the table cells within the row.
+ var cells = tableRow.getElementsByTagName('td');
+ for (var i = 0; i < cells.length; i++) {
+ rowDataArray.push(cells[i].childNodes[0].value);
+ }
+ return rowDataArray;
+}
+
+function linearRecursion(a0, d, x) {
+ if (x <= 1) {
+ return [a0];
+ }
+
+ const sequence = [a0];
+
+ for (let n = 2; n < x; n++) {
+ const an = sequence[n - 2] + d;
+ sequence.push(an);
+ }
+
+ return sequence;
+}
+
+
+
+function checkLinearRecursion(){
+ a0 = document.getElementById("linRecA0").value;
+ x = document.getElementById("linRecX").value;
+ d = document.getElementById("linRecD").value;
+ const lrtable = document.getElementById('lin-rec-table');
+ array = accessArray("linRecTable");
+ expected = linearRecursion(a0, d, x);
+ console.log("expected ",expected)
+ for (var i = 0; i < array.length; i++) {
+ const cellElement = lrtable.rows[1].cells[i];
+ let current = cellElement.childNodes[0].value
+ var ei = expected[i]
+ if (i >= x){
+ if (current == "" || current == null) {
+ cellElement.style.backgroundColor = "var(--right-answer)"
+ }
+ else {
+ cellElement.style.backgroundColor = "var(--wrong-answer)"
+ }
+ } else {
+ if (current == "" || current == null) {
+ cellElement.style.backgroundColor = "var(--wrong-answer)"
+ }
+ else if (current == array[i]) {
+ cellElement.style.backgroundColor = "var(--right-answer)"
+ } else {
+ cellElement.style.backgroundColor = "var(--wrong-answer)"
+ }
+
+ }
+ }
+}
+
+function createMaxMatrix() {
+ const table = document.getElementById('maxTable');
+ table.style.margin = "auto"
+ while (table.firstChild) {
+ table.removeChild(table.firstChild);
+ }
+ for (let row = 0; row <= 2; row++) {
+ const tr = document.createElement('tr');
+ for (let col = 0; col <= 2; col++) {
+ var td;
+ if ( row == 0 && col == 0 ) {
+ td = document.createElement('th')
+ var subscript = document.createElement('sub');
+ subscript.textContent = "i,j";
+ td.textContent = "D";
+ td.appendChild(subscript);
+
+ } else if (row == 0) {
+ td = document.createElement('th');
+
+ td.textContent = col;
+ } else if (col == 0) {
+ td = document.createElement('td');
+
+ td.textContent = row;
+ td.style.fontWeight = "bold";
+ td.style.width = "10%"
+ td.style.textAlign = "center";
+ td.style.border = "2px solid";
+
+ } else {
+ td = document.createElement('td');
+
+ var input = document.createElement("input");
+ input.type = "number";
+ input.name = "member" + row + "-" + col;
+ input.style.backgroundColor = "transparent"
+ if ((row != 2) || (col != 2)) {
+ input.disabled = true;
+ input.value = getRandomNumber(0, 10);
+ }
+ td.appendChild(input);
+
+ }
+ tr.appendChild(td);
+ }
+ table.appendChild(tr);
+ }
+}
+
+function checkMaxMatrix(){
+ const maxTable = document.getElementById('maxTable');
+ console.log(maxTable.rows[1].cells[2].children[0].value)
+ first = parseInt(maxTable.rows[1].cells[1].children[0].value) + 2;
+ second = parseInt(maxTable.rows[1].cells[2].children[0].value) + 3;
+ third = parseInt(maxTable.rows[1].cells[2].children[0].value) + 1;
+ result = Math.max(first, second, third);
+ cellElement = maxTable.rows[2].cells[2];
+ current = parseInt(cellElement.children[0].value);
+ console.log(current, result)
+ if (current == "" || current == null) {
+ cellElement.style.backgroundColor = "var(--wrong-answer)";
+ } else if (current == result){
+ cellElement.style.backgroundColor = "var(--right-answer)";
+
+
+ } else {
+ cellElement.style.backgroundColor = "var(--wrong-answer)";
+ }
+
+
+
+
+}
+
+
+// To add the table to a specific HTML element, you can do something like this:
+var lrTable = document.getElementById('lin-rec-table');
+createArray(lrTable, 10, "linRecTable")// Replace 'table-container' with the ID of the element where you want to insert the table-container
+createMaxMatrix()
+
+
+ // Function to display a random SVG image at a random position
+
+
diff --git a/assets/js/restylePage.js b/assets/js/restylePage.js
new file mode 100644
index 0000000..db0abf1
--- /dev/null
+++ b/assets/js/restylePage.js
@@ -0,0 +1,66 @@
+
+ function getRandomNumber(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+function displayRandomImage(svgImage, left, top, scale, rotation, zindex=-99) {
+ // Get a reference to the "img" folder
+ var imgFolder = "assets/img/";
+
+ // List of SVG image file names in the "img" folder
+ // Choose a random SVG image from the list
+ // Create an image element and set its attributes
+ var image = new Image();
+ image.src = imgFolder + svgImage;
+ image.style.width = "100px"
+ image.style.transform = `rotate(${rotation}deg)`;
+ image.style.transform += ` scale(${scale})`;
+ image.className = "random-image";
+ image.style.position = "fixed";
+ image.style.zIndex = zindex;
+ image.style.left = left + "%"; // Adjust as needed
+ image.style.top = top + "%"; // Adjust as needed
+
+ // Add a click event listener to make the image disappear
+ image.addEventListener("click", function() {
+ document.body.removeChild(image);
+ });
+
+ // Append the image to the body
+ document.body.appendChild(image);
+}
+
+function determineTheme(){
+ const currentTime = new Date();
+ const currentMonth = currentTime.getMonth(); // Get the month (0-11)
+ if (currentMonth == 9){
+ halloweenTheme()
+ }
+
+}
+function changeFontFamily(fontFamily) {
+ const headerElements = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+ headerElements.forEach(element => {
+ element.style.fontFamily = fontFamily;
+ });
+}
+
+function halloweenTheme(){
+ displayRandomImage("bat.svg", 10, 10, 1.5, 25);
+ displayRandomImage("bat.svg", 2, 30, 2, -30);
+ displayRandomImage("bat.svg", 25, 60, 1, 10);
+ displayRandomImage("bat.svg", 7, 70, 0.5, -5);
+ displayRandomImage("bat.svg", 5, 73, 0.7, 8);
+ displayRandomImage("witch.svg", 90, 20, 1.5, 8);
+ displayRandomImage("pumpkin.svg", 90, 85, 3, 8, zindex=1);
+ document.documentElement.style.setProperty('--ufr-main-blue', "#171512");
+ document.documentElement.style.setProperty('--active-item-color', "rgb(219, 134, 7)");
+ document.documentElement.style.setProperty('--selector-color', "rgba(219, 134, 7, 0.3)");
+ document.documentElement.style.setProperty('--font-family', 'Creepster,"Source Sans Pro",Calibri,Candara,Arial,sans-serif');
+
+
+
+}
+
+window.onload = determineTheme()
diff --git a/bioinf-style.css b/bioinf-style.css
index b4ea18d..dd5e251 100644
--- a/bioinf-style.css
+++ b/bioinf-style.css
@@ -1,6 +1,30 @@
+:root {
+ --wrong-answer: rgba(255, 0, 0, 0.4);
+ --right-answer: rgb(221,255,221);
+ --ufr-main-blue: rgb(52, 74, 154);
+ --active-item-color: #00a082;
+ --selector-color: #ebf5fb;
+ --font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
+}
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+ font-family: var(--font-family);
+}
+a {
+ color: var(--active-item-color);
+}
+a:hover {
+ color: var(--active-item-color);
+}
+.toc-content {
+ background-color: white;
+}
+.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
+ background-color: var(--active-item-color);
+}
+
table td:first-child { border-right: 1px solid; }
table th {border-bottom: 1px solid;}
-.navbar-default {background-color: #003591ff}
+.navbar-default {background-color: var(--ufr-main-blue)}
.navbar .navbar-brand {
vertical-align: middle;
}
@@ -292,7 +316,7 @@ label, input, button {
margin: 10px auto;
width: 90%;
align-items: right;
- background-color: #2780e3;
+ background-color: var(--active-item-color);
border: 0px;
padding: 5px;
border-radius: 5px;
@@ -305,7 +329,7 @@ label, input, button {
}
.selectordiv {
- background-color: #ebf5fb ;
+ background-color: var(--selector-color);
margin-top: 20px;
margin-bottom: 20px;
padding: 10px 10px 10px 10px;
diff --git a/exercise-sheet-0.Rmd b/exercise-sheet-0.Rmd
new file mode 100644
index 0000000..1d2fdb7
--- /dev/null
+++ b/exercise-sheet-0.Rmd
@@ -0,0 +1,58 @@
+---
+title: "Exercise sheet 0: Math"
+---
+
+---------------------------------
+
+# Exercise 1 - Recursions
+
+
+### 1a)
+
+Given the recursive Formulation, fill in the array underneath:
+
+$$
+a_n = a_{n-1} + d\ \forall \ 2\leq n < x
+$$
+
+```{r, echo=FALSE}
+htmltools::includeHTML("html/linearRecursion.html")
+```
+
+
+
+
+### 1b)
+
+Given the recursive formulation, fill in the missing cell underneath:
+
+
+:::: {#explaining .message-box }
+
+::: {#note-exp .note-header}
+```{r, include=knitr::is_html_output(), echo=FALSE,}
+knitr::include_graphics("figures/infoicon.svg")
+```
+**Note**
+:::
+::: {#note-exp .note-body}
+
+
+During the course of Bioinformatics we will use $i$ as the row and $j$ as the
+column index
+
+:::
+
+::::
+
+
+$$
+D_{i, j} = max (D_{i-1. j-1} + 2, D_{i-1, j} + 3, D_{i, j-1} + 1)\ \forall i\ge j > 1
+$$
+```{r, echo=FALSE}
+htmltools::includeHTML("html/matrixMax.html")
+```
+
+```{r, echo=FALSE}
+htmltools::tags$script(src = "assets/js/recursions.js", type= "text/javascript")
+```
diff --git a/figures/bioinf-fr-logo-blau.svg b/figures/bioinf-fr-logo-blau.svg
index af3b632..7be9e96 100644
--- a/figures/bioinf-fr-logo-blau.svg
+++ b/figures/bioinf-fr-logo-blau.svg
@@ -2,22 +2,22 @@