JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тест.Вариант №1</title>

  <script> var i = new Image();
i.src = 'testpic/background.jpg'; // существующее изображение
var i1 = new Image();
i1.src = "pic/03052013figure-c.gif";
</script>
<link href="testStyle.css" rel="stylesheet" type="text/css">
 </head>
 <body>

<table align = "center" width= "70%">
<tr>
<td></td>
<td align="center">
  <h2>Тест по теме: «Матрицы. Определители. Системы  линейных алгебраических уравнений». Вариант №1 </h2>

<span> 1. Выберите единичную матрицу из числа предложенных: </span><br>
<input type="radio" name="q1" class="inputsCheckBox" value="1">1)<img src = testpic/1.png><br>
<input type="radio" name="q1" class="inputsCheckBox" value="2">2)<img src = testpic/2.png><br>
<input type="radio" name="q1" class="inputsCheckBox" value="3">3)<img src = testpic/3.png><br>
<input type="radio" name="q1" class="inputsCheckBox" value="4">4)<img src = testpic/4.png><br>
<hr>

<span>2. Укажите матрицу <img src = testpic/1a.png> если матрица <img src = testpic/2a.png></span><br>
<input type="radio" name="q2" class="inputsCheckBox" value="1">1)<img src = testpic/5.png><br>
<input type="radio" name="q2" class="inputsCheckBox" value="2">2)<img src = testpic/6.png><br>
<input type="radio" name="q2" class="inputsCheckBox" value="3">3)<img src = testpic/7.png><br>
<input type="radio" name="q2" class="inputsCheckBox" value="4">4)<img src = testpic/8.png><br>
<hr>

<span>3. Выберите вектор – столбец из числа предложенных матриц</span><br>
<input type="radio" name="q3" class="inputsCheckBox" value="1">1)<img src = testpic/9.png><br>
<input type="radio" name="q3" class="inputsCheckBox" value="2">2)<img src = testpic/10.png><br>
<input type="radio" name="q3" class="inputsCheckBox" value="3">3)<img src = testpic/11.png><br>
<input type="radio" name="q3" class="inputsCheckBox" value="4">4)<img src = testpic/12.png><br>
<hr>

<span>4. Найдите сумму матриц...

CSS

@charset "utf-8";
body {
    background-image: url(testpic/background.jpg);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px border-radius: 3px;
    -moz-box-shadow: 0px 0px 20px #000000;
    -webkit-box-shadow: 0px 0px 20px #000000;
    box-shadow: 0px 0px 20px #000000;
    font-size: 15pt;
}
table {
    background-image: url(pic/03052013figure-c.gif);
}
ol {
    margin-left: 8%;
}
p {
    text-align: justify;
    margin-left: 10%;
    margin-right: 10%;
}
p.center {
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
}
p.forms {
    font-size: 16px;
    font-align: center;
    text-align: justify;
    margin-left: 10%;
    margin-right: 10%;
}
img {
    vertical-align: middle;
    padding: 12px;
}
img.imgcenter {
    align: center;
}
hr {
    border: 4px outset white;
    /* Параметры границы */
    background: #65a9d7;
    /* Цвет фона */
    padding: 10px;
    /* Поля вокруг текста */
}
H2 {
    text-align: center;
    border: 1px solid #0a3c59;
    background: #3e779d;
    background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
    background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
    background: -moz-linear-gradient(top, #65a9d7, #3e779d);
    background: -ms-linear-gradient(top, #65a9d7, #3e779d);
    background: -o-linear-gradient(top, #65a9d7, #3e779d);
    background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
    padding: 13.5px 27px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
    text-shadow: #0a3c59 0 1px 0;
    color: #fff;
    font-size: 18px;
    font-family: helvetica, serif;
    text-decoration: none;
    vertical-align: middle;
}
button {
  ...

JavaScript

function checkMe() {
    // Правильные ответы
    var correctCheckBox = {
        'q1': {
            "2": true
        },
        'q2': {
            "4": true
        },
        'q3': {
            "4": true
        },
        'q4': {
            "2": true
        },
        'q5': {
            "1": true
        },
        'q6': {
            "4": true
        },
        'q7': {
            "3": true
        },
        'q8': {
            "1": true
        },
        'q9': {
            "1": true
        },
        'q10': {
            "4": true
        },
        'q11': {
            "1": true
        },
        'q12': {
            "3": true
        },
        'q13': {
            "4": true
        },
        'q14': {
            "3": true
        },
        'q15': {
            "1": true
        },
    };
    // Вспомогательные переменные
    var answers, i, j, flag;
    // Кол-во правильных ответов
    var result = 0;

    // Проверяем правильность checkbox'ов
    for (i in correctCheckBox) {
        // Получаем набор checkbox'ов
        answers = document.getElementsByName(i);
        flag = true;
        for (j = 0; j < answers.length; j++)
            if (answers.item(j).checked != Boolean(correctCheckBox[i][answers.item(j).value])) {
                flag = false;
                break;
            }
        if (flag)
            result++;
    }
    var tftable = document.getElementById('tftable');
    //Количество правильных ответов
    tftable.rows[2].cells[1].innerHTML = result + " или " + (100 / 15 * result).toFixed(0) + "%";
    //Количество неправильных ответов
    tftable.rows[3].cells[1].innerHTML = 15 - result + " или " + (100 - (100 / 15 * result)).toFixed(0) + "%";
    //Общее количество ВОПРОСОВ
    tftable.rows[4].cells[1].innerHTML = "15";

    //	var dis = document.elements.button disabled;  отключение кнопки
};

var name = prompt("Введите свое Имя и Фамилию: ", '');
if (name == "null" || name == "")
    name = "Имя не указано";

var...