Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Орфографический анализ</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .question-card { | |
| transition: all 0.3s ease; | |
| } | |
| .question-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .option-item { | |
| transition: all 0.2s ease; | |
| } | |
| .option-item:hover { | |
| background-color: #f3f4f6; | |
| } | |
| .correct { | |
| background-color: #d1fae5 ; | |
| border-left: 4px solid #10b981; | |
| } | |
| .incorrect { | |
| background-color: #fee2e2 ; | |
| border-left: 4px solid #ef4444; | |
| } | |
| .explanation { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease; | |
| } | |
| .explanation.active { | |
| max-height: 500px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2">Орфографический анализ</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Выберите варианты ответов с верным объяснением написания выделенных слов</p> | |
| <div class="w-24 h-1 bg-indigo-500 mx-auto mt-4 rounded-full"></div> | |
| </header> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Question 1 --> | |
| <div class="question-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-indigo-600 text-white px-4 py-3"> | |
| <h2 class="font-semibold text-lg">Задание 4</h2> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-700 mb-4">Укажите варианты ответов, в которых дано верное объяснение написания выделенного слова.</p> | |
| <div class="space-y-3"> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, true)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">1</span> | |
| <div> | |
| <span class="font-semibold">ЗАНИМАТЬСЯ</span> — написание безударной чередующейся гласной в корне определяется наличием суффикса -А-. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Верно. В корне -НИМ-/ -НЯ- пишется А, если после корня стоит суффикс -А-.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, true)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">2</span> | |
| <div> | |
| <span class="font-semibold">ВЫНЕСИТЕ</span> (немедленно) — в форме будущего времени 2-го лица единственного числа глагола II спряжения пишется окончание -ИТЕ. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Верно. Глагол "вынести" относится ко II спряжению, поэтому в форме 2 лица мн. числа пишется окончание -ИТЕ.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, false)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">3</span> | |
| <div> | |
| <span class="font-semibold">НЕ ЗАВЕРШЕНА</span> (встреча) — частица НЕ с деепричастием пишется раздельно. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Неверно. "Не завершена" — это краткое причастие, а не деепричастие. С краткими причастиями НЕ пишется раздельно, но объяснение неверное.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, true)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">4</span> | |
| <div> | |
| <span class="font-semibold">СУПЕРИГРА</span> — после приставки иноязычного происхождения, оканчивающейся на согласный, пишется буква И. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Верно. Приставка "супер-" иноязычного происхождения, после неё сохраняется И в корне.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, false)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">5</span> | |
| <div> | |
| <span class="font-semibold">ПТИЦЕЙ</span> — в суффиксе имени существительного после Ц без ударения пишется буква Е. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Неверно. В суффиксе -ЕЙ- после Ц пишется Е, но это окончание, а не суффикс.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-blue-50 p-3 rounded hidden" id="answer4"> | |
| <p class="font-medium text-blue-800">Правильные ответы: 1, 2, 4</p> | |
| </div> | |
| <button onclick="showAnswer(4)" class="mt-4 w-full bg-indigo-100 text-indigo-700 py-2 rounded-md font-medium hover:bg-indigo-200 transition"> | |
| Показать правильные ответы | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Question 2 --> | |
| <div class="question-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-indigo-600 text-white px-4 py-3"> | |
| <h2 class="font-semibold text-lg">Задание 5</h2> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-700 mb-4">Укажите варианты ответов, в которых дано верное объяснение написания выделенного слова.</p> | |
| <div class="space-y-3"> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, false)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">1</span> | |
| <div> | |
| <span class="font-semibold">ПРИВЕТСТВОВАТЬ</span> — написание приставки определяется её значением — приближение. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Неверно. Приставка "при-" здесь имеет значение неполноты действия, а не приближения.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, false)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">2</span> | |
| <div> | |
| <span class="font-semibold">НЕПРАВДА</span> — НЕ пишется слитно с именем существительным, которое не употребляется без НЕ. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Неверно. "Правда" существует как самостоятельное слово, поэтому объяснение неверное.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, true)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">3</span> | |
| <div> | |
| <span class="font-semibold">К ПРИСТАНИ</span> — в форме дательного падежа единственного числа имени существительного 3-го склонения пишется окончание -И. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Верно. Существительное "пристань" 3-го склонения, в дательном падеже имеет окончание -И.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, false)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">4</span> | |
| <div> | |
| <span class="font-semibold">НАВЗНИЧЬ</span> — в кратком имени прилагательном с основой на шипящий пишется буква Ь. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Неверно. "Навзничь" — это наречие, а не краткое прилагательное.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, true)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">5</span> | |
| <div> | |
| <span class="font-semibold">БЕСКОНЕЧНЫЙ</span> — на конце приставки перед буквой, обозначающей глухой согласный звук, пишется буква С. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Верно. Приставка "бес-" пишется перед глухими согласными (к — глухой согласный).</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-blue-50 p-3 rounded hidden" id="answer5"> | |
| <p class="font-medium text-blue-800">Правильные ответы: 3, 5</p> | |
| </div> | |
| <button onclick="showAnswer(5)" class="mt-4 w-full bg-indigo-100 text-indigo-700 py-2 rounded-md font-medium hover:bg-indigo-200 transition"> | |
| Показать правильные ответы | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Question 3 --> | |
| <div class="question-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-indigo-600 text-white px-4 py-3"> | |
| <h2 class="font-semibold text-lg">Задание 6</h2> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-700 mb-4">Укажите варианты ответов, в которых дано верное объяснение написания выделенного слова.</p> | |
| <div class="space-y-3"> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, true)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">1</span> | |
| <div> | |
| <span class="font-semibold">ЗДРАВСТВУЙТЕ</span> — Приставка неизменяемая. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Верно. В слове "здравствуйте" приставка "здрав-" не изменяется.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, true)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">2</span> | |
| <div> | |
| <span class="font-semibold">КУРИНЫЙ</span> (суп) — в суффиксе -ИН- отымённых прилагательных пишется одна -Н-. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Верно. В суффиксе -ИН- прилагательных пишется одна Н.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, false)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">3</span> | |
| <div> | |
| <span class="font-semibold">ГОРЕТЬ</span> — написание безударной чередующейся гласной в корне слова зависит от суффикса, который следует за корнем. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Неверно. В корне -ГОР-/ -ГАР- написание гласной зависит от ударения, а не от суффикса.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, true)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">4</span> | |
| <div> | |
| <span class="font-semibold">(стало) НЕВТЕРПЁЖ</span> — на конце наречий после шипящего буква Ь не пишется. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Верно. В наречии "невтерпёж" после шипящего Ь не пишется.</p> | |
| </div> | |
| </div> | |
| <div class="option-item bg-gray-50 p-3 rounded cursor-pointer" onclick="checkAnswer(this, true)"> | |
| <div class="flex items-start"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">5</span> | |
| <div> | |
| <span class="font-semibold">(подойти к) КОМУ-ЛИБО</span> — неопределённое местоимение пишется через дефис, потому что с суффиксом -ЛИБО- слова пишутся через дефис. | |
| </div> | |
| </div> | |
| <div class="explanation mt-2 pl-9 text-sm text-gray-600"> | |
| <p>Верно. Местоимения с суффиксами -ЛИБО, -НИБУДЬ, -ТО пишутся через дефис.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-blue-50 p-3 rounded hidden" id="answer6"> | |
| <p class="font-medium text-blue-800">Правильные ответы: 1, 2, 4, 5</p> | |
| </div> | |
| <button onclick="showAnswer(6)" class="mt-4 w-full bg-indigo-100 text-indigo-700 py-2 rounded-md font-medium hover:bg-indigo-200 transition"> | |
| Показать правильные ответы | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-white rounded-lg shadow-md p-6 max-w-3xl mx-auto"> | |
| <h2 class="text-xl font-bold text-indigo-800 mb-4">Результаты теста</h2> | |
| <div class="grid grid-cols-3 gap-4 text-center"> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <div class="text-3xl font-bold text-indigo-600" id="correctCount">0</div> | |
| <div class="text-gray-600">Правильно</div> | |
| </div> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <div class="text-3xl font-bold text-indigo-600" id="incorrectCount">0</div> | |
| <div class="text-gray-600">Неправильно</div> | |
| </div> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <div class="text-3xl font-bold text-indigo-600" id="score">0%</div> | |
| <div class="text-gray-600">Результат</div> | |
| </div> | |
| </div> | |
| <button onclick="resetTest()" class="mt-6 w-full bg-indigo-600 text-white py-2 rounded-md font-medium hover:bg-indigo-700 transition"> | |
| Начать заново | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| let correctAnswers = 0; | |
| let incorrectAnswers = 0; | |
| const totalQuestions = 12; // 4+5+3 correct options | |
| function checkAnswer(element, isCorrect) { | |
| // Remove any existing classes | |
| element.classList.remove('correct', 'incorrect'); | |
| // Find the explanation div | |
| const explanation = element.querySelector('.explanation'); | |
| if (isCorrect) { | |
| element.classList.add('correct'); | |
| correctAnswers++; | |
| } else { | |
| element.classList.add('incorrect'); | |
| incorrectAnswers++; | |
| } | |
| // Toggle explanation | |
| explanation.classList.toggle('active'); | |
| // Update counters | |
| updateCounters(); | |
| } | |
| function updateCounters() { | |
| document.getElementById('correctCount').textContent = correctAnswers; | |
| document.getElementById('incorrectCount').textContent = incorrectAnswers; | |
| const percentage = Math.round((correctAnswers / totalQuestions) * 100); | |
| document.getElementById('score').textContent = percentage + '%'; | |
| } | |
| function showAnswer(questionNumber) { | |
| const answerDiv = document.getElementById('answer' + questionNumber); | |
| answerDiv.classList.toggle('hidden'); | |
| } | |
| function resetTest() { | |
| // Reset counters | |
| correctAnswers = 0; | |
| incorrectAnswers = 0; | |
| updateCounters(); | |
| // Remove all answer highlights | |
| const options = document.querySelectorAll('.option-item'); | |
| options.forEach(option => { | |
| option.classList.remove('correct', 'incorrect'); | |
| option.querySelector('.explanation').classList.remove('active'); | |
| }); | |
| // Hide all answer divs | |
| const answerDivs = document.querySelectorAll('[id^="answer"]'); | |
| answerDivs.forEach(div => { | |
| div.classList.add('hidden'); | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=l0ngAF/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |