MrTimon

Как сказал Nikita Velko там убирается скрол и ставиться паддинг, что изменяет ширину блока body, а для меню (блок с классом .menuFix) у вас стоит ширина в процентах, значит тоже изменяется. Лутшим решением будет поставить этому меню не 100% ширину а 100vw тоисть

.menuFix {
    width: 100vw;
}

правда не уверен на счет кроссбраузерности

Id на странице должно быть уникальным так как это индификатор елемента, потому jquery и возращает только первій попавшийся елемент. Добавте до елементов класс (можно и такой же как и id) и в строке
$('#fun-level').each(function(){

измените селектор на выбор по классу
$('.fun-level').each(function(){

Как то так https://jsfiddle.net/gkjktkak/4/ ?

Менять значение opacity для дива с айдишкой main а не бекграунд для body.

пожешь попробовать ф-цию DOMDocument::loadHTML

getShapeParams Переписать так:

function getShapeParams() {
  var shapeParams = {};
  shapeParams = {
    radius: document.getElementsByClassName('radius')[0].value.toString(),
    x1Crd: document.getElementsByClassName('circle-x1-crd')[0].value.toString(),
    x2Crd: document.getElementsByClassName('circle-y2-crd')[0].value.toString()
  };
  console.log(shapeParams.radius);
  return shapeParams;
}

а во второй ф-ции: getShapeParams(shapeParams); заменить на var shapeParams = getShapeParams(); и все должно работать.

Ну или обявить обект shapeParams вне функций. тогда получиться так:

var shapeParams = {};
function getShapeParams() {
  shapeParams = {
    radius: document.getElementsByClassName('radius')[0].value.toString(),
    x1Crd: document.getElementsByClassName('circle-x1-crd')[0].value.toString(),
    x2Crd: document.getElementsByClassName('circle-y2-crd')[0].value.toString()
  };
  console.log(shapeParams.radius);
}

function circle() {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  getShapeParams();

  this.radius = shapeParams.radius;
  this.x1Crd = shapeParams.x1Crd;
  this.x2Crd = shapeParams.x2Crd;

  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(x1Crd, x2Crd, radius, 0, Math.PI*2, false);
  context.fillStyle = 'red';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = 'red';
  context.stroke();
}

circle();

но первый метод полутше будет.

Вообще у Вас в каждом выводе чекбокса

<td><input type="checkbox" name="theme_settings[show_block_2]" id="theme_settings[show_block_2]" value="1"<?php if($options[show_block_2]=='1') echo ' checked="checked"';?> /></td>

ошибка здесь $options[show_block_2]=='1' должно быть так $options['show_block_2']=='1') поидеи, тоить добавте кавычки в масиве.

И да, чтобы сохранить 0 для этих значений вам нужно добавить

<input type="hidden" name="theme_settings[show_block_1]" value="0">

перед каждым чекбоксом

var div = document.createElement('div');
div.className = 'cl';

Эти строчки нужно переместить в тело функции , что вызывается на клик. (в самом начале функции нужно поставить)

Ну во первых Вам нужно поле id в таблице которое будет ключом и будет однозначно определять ученика.

Потом, зачем Вы выводите форму для каждого селекта отдельно. Выведите начало формы перед выводом таблицы а конец после кнопки сабмит. А для селестов определите name с айдишкамы школьников (choose_caretaker[$id]).

тогда после сабмита на сервере в переменной $_REQUEST['choose_caretaker'] вы получите массив где ключом будет id ученика, а значение будет значение выбраного Caretaker

хорошо бы было и верску увидеть, но можно и обойтись. Если делать именно так как у Вас написано то можно сделать так:

$('.sub-menu_lvl1 li a').mouseenter(function() {
    var classes = ['one','two','three','four','five']
     
    $('.sub-menu_lvl2').removeClass('info-visible');
    $('.sub-menu_lvl2.' + classes[ $(this).closest('li').index()]).addClass('info-visible');
  });

Но это не самый лучший вариант. Лучше для линка на который вы наводите прописать id или data атрибут такой же как класс который нужно сделать видимым (one, two, three, four, five ) . Ну и при наведении выбирать это значение.
тоисть ссилка должна быть <a href="#" data-visibleclass="one">...</a> и тогда:

$('.sub-menu_lvl1 li a').mouseenter(function() { 
    $('.sub-menu_lvl2').removeClass('info-visible');
    $('.sub-menu_lvl2.' + $(this).data('visibleclass')).addClass('info-visible');
  });