<div class="arrow-steps clearfix" style="display: flex; flex-wrap: wrap; justify-content: center;">
    <div class="step" name="module-185665"> <span><a href="#module-185665">Рекомендації</a></span></div>
    <div class="step" name="module-185758"> <span><a href="#module-185758">Тема 1</a></span></div>
    <div class="step" name="module-216003"> <span><a href="#module-216003">ЛР 1</a></span></div>
    <div class="step" name="module-187883"> <span><a href="#module-187883">Тема 2</a></span></div>
    <div class="step" name="module-188535"> <span><a href="#module-188535">ЛР 2</a></span></div>
    <div class="step" name="module-189684"> <span><a href="#module-189684">Тема 3</a></span></div>
    <div class="step" name="module-189647"> <span><a href="#module-189647">ЛР 3</a></span></div>
    <div class="step" name="module-189960"> <span><a href="#module-189960">Тема 4</a></span></div>
    <div class="step" name="module-190438"> <span><a href="#module-190438">ЛР 4</a></span></div>
    <div class="step" name="module-190975"> <span><a href="#module-190975">Тема 5</a></span></div>
    <div class="step" name="module-191198"> <span><a href="#module-191198">ЛР 5</a></span></div>
    <div class="step" name="module-192148"> <span><a href="#module-192148">Тема 6</a></span></div>
    <div class="step" name="module-192147"> <span><a href="#module-192147">ЛР 6</a></span></div>
    <div class="step" name="module-192959"> <span><a href="#module-192959">Тема 7</a></span></div>
    <div class="step" name="module-192960"> <span><a href="#module-192960">ЛР 7</a></span></div>
    <div class="step" name="module-193566"> <span><a href="#module-193566">Тема 8</a></span></div>
    <div class="step" name="module-193582"> <span><a href="#module-193582">ЛР 8</a></span></div>
    <div class="step" name="module-193685"> <span><a href="#module-193685">МКР</a></span></div>
    <div class="step" name="module-193699"> <span><a href="#module-193699">ДКР</a></span></div>
    <div class="step" name="ocinka"> <span><a href="#" id="ototal">Бали: --</a></span></div>
</div>

<script>
    var courseURL = 'https://do.ipo.kpi.ua/grade/report/user/index.php?id=6455';
    var thisModuleId = 'module-185673';
    var css = '.clearfix:after {  clear: both;  content: "";  display: block;  height: 0;}/* Responsive Arrow Progress Bar */.container {  font-family: sans-serif;}.arrow-steps .step {  font-size: 14px;  text-align: left;  color: #777;  cursor: default;  margin: 0 2px 0 0;  padding: 10px 2px 10px 20px;  width: auto;  heigth: 20px;  float: left;  position: relative;  background-color: #ddd;}.arrow-steps .step a {  color: #777;  text-decoration: none;}.arrow-steps .step:after,.arrow-steps .step:before {  content: "";  position: absolute;  top: 0;  right: -16px;  width: 0;  height: 20;  border-top: 20px solid transparent;  border-bottom: 20px solid transparent;  border-left: 17px solid #ddd;  z-index: 2;}.arrow-steps .step:before {  right: auto;  left: 0;  border-left: 17px solid #fff;  z-index: 0;}.arrow-steps .step:first-child:before {  border: none;}.arrow-steps .step:last-child:after {  border: none;}.arrow-steps .step:first-child {  border-top-left-radius: 4px;  border-bottom-left-radius: 4px;}.arrow-steps .step:last-child {  border-top-right-radius: 4px;  border-bottom-right-radius: 4px;  padding: 10px 10px 10px 20px;}.arrow-steps .step span {  position: relative;}*.arrow-steps .step.done span:before {  opacity: 1;  content: "";  position: absolute;  top: -2px;  left: -10px;  font-size: 11px;  line-height: 21px;}.arrow-steps .step.current {  color: #fff;  background-color: #5599e5;}.arrow-steps .step.current a {  color: #fff;  text-decoration: none;}.arrow-steps .step.current:after {  border-left: 17px solid #5599e5;}.arrow-steps .step.done {  color: #173352;  background-color: #2f69aa;}.arrow-steps .step.done a {  color: #173352;  text-decoration: none;}.arrow-steps .step.done:after {  border-left: 17px solid #2f69aa;}',
        head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style');

    head.appendChild(style);

    style.type = 'text/css';
    if (style.styleSheet) {
        // This is required for IE8 and below.
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
</script>

<script>
    window.onload = function() {
        myFunction()
    };

    function myFunction() {
        var step = document.getElementsByClassName('step');
        var allStepsCompleted = true;

        for (var i = 0; i < step.length; i++) {
            let stepId = step[i].getAttribute('name');

            if (stepId != null) {
                let activity = document.getElementById(stepId);
                if (activity != null) {
                    let image = activity.getElementsByTagName('img')[1];
                    if (image != undefined) {
                        let src = image.getAttribute('src');
                        if (src != undefined && src.includes("completion-auto-y") || src != undefined && src.includes("completion-auto-pass")) {
                            step[i].classList.add("current");
                        } else {
                            allStepsCompleted = false;
                        }
                    } else {
                        allStepsCompleted = false;
                    }
                } else {
                    allStepsCompleted = false;
                }
            } else {
                allStepsCompleted = false;
            }
        }

        if (allStepsCompleted) {
            var lastStep = step[step.length - 1];
            lastStep.classList.add("current");
        }

        document.getElementById(thisModuleId).getElementsByClassName('no-overflow')[1].style.overflow = "hidden";
    }
    if (document.getElementById('ototal')) {
        function file_get_contents(filename) {
            fetch(filename).then((resp) => resp.text()).then(data => {
                const parser = new DOMParser();
                let doc = parser.parseFromString(data, 'text/html');
                let table = doc.querySelector('table');
                let lastRow = table.rows[table.rows.length - 1];
                let grageCol = lastRow.querySelectorAll('td')[0];

                document.getElementById('ototal').innerHTML = "Оцінка: " + grageCol.innerHTML;
            });
        }

        file_get_contents(courseURL);
    }
</script>
<script defer="">
    const bodyElement = document.querySelector('body');
    const sidePanel = document.querySelector('.d-print-none.moodle-has-zindex');

    if (sidePanel) {
        sidePanel.classList.add('closed');
    }
    if (bodyElement) {
        bodyElement.style.marginLeft = '0';
    }
</script>
<script>
    document.body.style.backgroundColor = "lightblue";
</script>