index.html

<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="algorithm_bubbleSort.js"></script>
<h1>Worked Examples</h1>
<h2 id="name_algorithm">Bubble Sort</h2>

<div class="difficulty-buttons" style="width:10%; display: flex;" id="complexity-selection">
    <button id="button_simple" onclick="setDifficulty(3)">Einfach</button>
    <button id="button_medium" onclick="setDifficulty(2)">Mittel</button>
    <button id="button_hard" onclick="setDifficulty(1)">Schwer</button>
</div>


<div id="algorithm_section" style="display: flex;">
    <div>
        <div class="help_information_window" style="width: 20%" id="help_information_window">
            Hier werden Tipps angezeigt
        </div>
        <label class="switch">
            <input id="checkbox_help_information" type="checkbox" onclick="switch_help_information()">
            <span class="slider-green round"></span>
        </label>
    </div>
    <div style="display: flex;">
        <div>
            <div id="algorithm_implementation">   
            </div>
            <button onclick="checkCode()">Fertig</button>
            <button onclick="showSolution()">Musterloesung</button>
        </div>
        <div id="solution">
        </div>
    </div>
</div>
<button id="nextButton" onclick ="show_next_algorithm()">nächster Algorithmus</button>

