first draft gotoh tool

assets/js/gotoh.js

@@ -89,6 +89,7 @@ function createTable(tid, headContent) {
                 newDiv.addEventListener('click', function() {
             // Toggle the 'highlight' class
                   newDiv.classList.toggle('selectedTracebackCell');
+                  newDiv.style.border = null;
                 });
 
             }
@@ -350,7 +351,7 @@ function unpackTracebacks(traceback_paths, seqA, seqB) {
   var matrices = { "D": D, "Q": Q, "P": P };
 
 
-  for (let p = 0; p < Math.min(traceback_paths.length, 10); p++) {
+  for (let p = 0; p < traceback_paths.length; p++) {
       var path = traceback_paths[p];
       for (let x = 0; x < path.length; x++) {
         var m = path[x][0];

assets/js/restylePage.js

@@ -69,6 +69,7 @@ function halloweenTheme(){
   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('--selectedCell', "rgb(219, 134, 7, 0.4)");
   document.documentElement.style.setProperty('--font-family', 'Creepster,"Source Sans Pro",Calibri,Candara,Arial,sans-serif');
   document.body.style.backgroundImage = "url('assets/img/GraveYard.svg')";
   document.body.style.backgroundSize = "cover"

bioinf-style.css

@@ -351,8 +351,7 @@ label, input, button {
   align-items: center;
   background-color: var(--active-item-color);
   border: 0px;
-  padding-top: 5px;
-  padding-bottom: 5px;
+  padding: 5px;
   border-radius: 5px;
   box-shadow: 0 .2rem .5rem grey, 0 0 .0625rem grey !important;
   display: flex;

exercise-sheet-4.Rmd

@@ -99,49 +99,49 @@ Does the order of checking insertion and deletions change the runtime?
 
 # Exercise 2 - Waterman-Smith-Beyer traceback
 
-Given the Waterman-Smith-Beyer algorithm with the following scoring function:
+<!-- Given the Waterman-Smith-Beyer algorithm with the following scoring function: -->
 
-\begin{align}
-s(x,y)&=
-\begin{cases}
-  -1 & if\ x = y \\
-  +1 & else\\ 
-\end{cases}\\
-g(k) &= 1 + k
-\end{align}
+<!-- \begin{align} -->
+<!-- s(x,y)&= -->
+<!-- \begin{cases} -->
+<!--   -1 & if\ x = y \\ -->
+<!--   +1 & else\\  -->
+<!-- \end{cases}\\ -->
+<!-- g(k) &= 1 + k -->
+<!-- \end{align} -->
 
-When aligning sequences of very different lengths the penalizing of leading and trailing gaps, i.e unaligned sequence ends, dominates the alignment score.
+<!-- When aligning sequences of very different lengths the penalizing of leading and trailing gaps, i.e unaligned sequence ends, dominates the alignment score. -->
 
-We distinguish between leading and trailing gaps (example):
+<!-- We distinguish between leading and trailing gaps (example): -->
 
-```
-A-CC-CC-G
--TCCGCCT-
-``` 
+<!-- ``` -->
+<!-- A-CC-CC-G -->
+<!-- -TCCGCCT- -->
+<!-- ```  -->
 
-In this case the leading gaps are:
+<!-- In this case the leading gaps are: -->
 
-```
-A-
--T
-``` 
+<!-- ``` -->
+<!-- A- -->
+<!-- -T -->
+<!-- ```  -->
 
-The trailing gaps are:
+<!-- The trailing gaps are: -->
 
-```
--G
-T-
-```
+<!-- ``` -->
+<!-- -G -->
+<!-- T- -->
+<!-- ``` -->
 
-The algorithm by Waterman, Smith and Beyer can be adapted to treat end gaps with a score of 0.
-The adapted recursion formula is defined here, where n and m are the lengths of the respective sequences:
+<!-- The algorithm by Waterman, Smith and Beyer can be adapted to treat end gaps with a score of 0. -->
+<!-- The adapted recursion formula is defined here, where n and m are the lengths of the respective sequences: -->
 
-Let $A$ and $B$ be sequences of length $n$ and $m$ respectively 
+<!-- Let $A$ and $B$ be sequences of length $n$ and $m$ respectively  -->
 
-$$
-a_i \in A,\ with\ 1 \leq i \leq n \\
-b_j \in B,\ with\ 1 \leq j \leq m
-$$
+<!-- $$ -->
+<!-- a_i \in A,\ with\ 1 \leq i \leq n \\ -->
+<!-- b_j \in B,\ with\ 1 \leq j \leq m -->
+<!-- $$ -->
 
 :::: {#explaining .warning-box }
 
@@ -156,7 +156,6 @@ knitr::include_graphics("figures/warningicon.svg")
 The previously uploaded recursion schema was wrong. We will either try to fix
 this exercise or remove it completely. Sorry for any inconvenience.
 
-(Also let us know if you can provide a correct recursion schema)
 
 :::
 
@@ -424,14 +423,35 @@ Programming assignments are available via Github Classroom and contain automatic
 
 We recommend doing these assignments since they will help you to further understand this topic.
 
-Access the Github Classroom link: [Programming Assignment: Sheet 04](https://classroom.github.com/a/qvHvwhcf).
+Access the Github Classroom link: [Programming Assignment: Sheet 04](https://classroom.github.com/a/YvN8ydfp).
 
 -------------------------------------------
 
 
 # Preparing for the Exam
 
 
+Below you find an interactive tool that allows you to create dynamic programming matrices to practice for the exam.
+You can fill in the table and check which values are correct via the Check Matrix button. Correctly filled cells will turn green.
+
+Once you filled in the cells, you can trigger the traceback mode toggle. This will disable the input fields. However, you can now select cells that are part of a traceback. While in traceback mode you can click the Check Traceback button. Cells which you marked correctly as being part of a traceback will get a green border. Cells that you marked
+incorrectly will be surrounded by a red border.
+
+:::: {#explaining .warning-box }
+
+::: {#note-exp .warning-header}
+```{r, include=knitr::is_html_output(), echo=FALSE,}
+knitr::include_graphics("figures/warningicon.svg")
+```
+**Warning**
+:::
+::: {#note-exp .note-body}
+
+This tool is in beta and might contain bugs.
+:::
+::::
+
+
 ```{r, echo=FALSE}
 htmltools::includeHTML("html/Gotoh.html")
 ```