4 дек. 2024
Тест
<!DOCTYPE html>
<html lang="en">
<head>
<title>Quiz Presentation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: #fff;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.presentation-container {
width: 90vw;
height: 90vh;
max-width: 1200px;
max-height: 800px;
position: relative;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 60px;
text-align: center;
transform: translateX(100%);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
opacity: 0;
}
.slide.active {
transform: translateX(0);
opacity: 1;
}
.slide.prev {
transform: translateX(-100%);
opacity: 0;
}
.slide:nth-child(1) {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.slide:nth-child(2) {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.slide:nth-child(3) {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.slide:nth-child(4) {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.slide:nth-child(5) {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.slide:nth-child(6) {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
.question-number {
font-size: 24px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
font-weight: 300;
transform: translateY(30px);
opacity: 0;
animation: slideInUp 0.6s ease forwards;
animation-delay: 0.2s;
}
.question-text {
font-size: 48px;
color: white;
font-weight: bold;
line-height: 1.2;
margin-bottom: 40px;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transform: translateY(30px);
opacity: 0;
animation: slideInUp 0.6s ease forwards;
animation-delay: 0.4s;
}
.options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%;
max-width: 800px;
margin-top: 40px;
}
.option {
background: rgba(255, 255, 255, 0.9);
padding: 25px 30px;
border-radius: 15px;
font-size: 20px;
font-weight: 600;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
transform: translateY(30px);
opacity: 0;
animation: slideInUp 0.6s ease forwards;
border: 3px solid transparent;
position: relative;
overflow: hidden;
}
.option:nth-child(1) { animation-delay: 0.6s; }
.option:nth-child(2) { animation-delay: 0.7s; }
.option:nth-child(3) { animation-delay: 0.8s; }
.option:nth-child(4) { animation-delay: 0.9s; }
.option:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
background: white;
}
.option.selected {
background: #4facfe;
color: white;
border-color: white;
transform: scale(1.05);
}
.option.correct {
background: #43e97b;
color: white;
animation: pulse 0.6s ease;
}
.option.incorrect {
background: #ff6b6b;
color: white;
animation: shake 0.6s ease;
}
@keyframes slideInUp {
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
.controls {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 100;
}
.control-btn {
padding: 15px 30px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
color: #333;
}
.control-btn:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.control-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
height: 4px;
background: rgba(255, 255, 255, 0.3);
width: 100%;
z-index: 100;
}
.progress-fill {
height: 100%;
background: white;
width: 0%;
transition: width 0.8s ease;
}
.slide-counter {
position: absolute;
top: 30px;
right: 30px;
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
font-weight: 300;
z-index: 100;
}
.intro-slide {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.intro-slide .question-text {
font-size: 64px;
margin-bottom: 20px;
}
.intro-slide .question-number {
font-size: 28px;
margin-bottom: 50px;
}
.results-slide {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
}
.score-display {
font-size: 72px;
color: white;
font-weight: bold;
margin-bottom: 30px;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.score-text {
font-size: 32px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
}
.restart-btn {
padding: 20px 40px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 30px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
color: #333;
}
.restart-btn:hover {
background: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="presentation-container">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="slide-counter" id="slideCounter">1 / 7</div>
<div class="slide active intro-slide" id="slide0">
<div class="question-number">Добро пожаловать!</div>
<div class="question-text">Викторина по программированию</div>
<div class="question-number">Готовы проверить свои знания?</div>
</div>
<div class="slide" id="slide1">
<div class="question-number">Вопрос 1 из 5</div>
<div class="question-text">Что означает HTML?</div>
<div class="options">
<div class="option" data-answer="correct">HyperText Markup Language</div>
<div class="option" data-answer="incorrect">High Tech Modern Language</div>
<div class="option" data-answer="incorrect">Home Tool Markup Language</div>
<div class="option" data-answer="incorrect">Hyperlink and Text Markup Language</div>
</div>
</div>
<div class="slide" id="slide2">
<div class="question-number">Вопрос 2 из 5</div>
<div class="question-text">Какой язык используется для стилизации веб-страниц?</div>
<div class="options">
<div class="option" data-answer="incorrect">JavaScript</div>
<div class="option" data-answer="correct">CSS</div>
<div class="option" data-answer="incorrect">Python</div>
<div class="option" data-answer="incorrect">HTML</div>
</div>
</div>
<div class="slide" id="slide3">
<div class="question-number">Вопрос 3 из 5</div>
<div class="question-text">Что такое переменная в программировании?</div>
<div class="options">
<div class="option" data-answer="incorrect">Постоянное значение</div>
<div class="option" data-answer="correct">Контейнер для хранения данных</div>
<div class="option" data-answer="incorrect">Тип функции</div>
<div class="option" data-answer="incorrect">Способ комментирования кода</div>
</div>
</div>
<div class="slide" id="slide4">
<div class="question-number">Вопрос 4 из 5</div>
<div class="question-text">Какой символ используется для комментариев в JavaScript?</div>
<div class="options">
<div class="option" data-answer="incorrect">#</div>
<div class="option" data-answer="correct">//</div>
<div class="option" data-answer="incorrect">/* */</div>
<div class="option" data-answer="incorrect">--</div>
</div>
</div>
<div class="slide" id="slide5">
<div class="question-number">Вопрос 5 из 5</div>
<div class="question-text">Что означает API?</div>
<div class="options">
<div class="option" data-answer="correct">Application Programming Interface</div>
<div class="option" data-answer="incorrect">Advanced Programming Integration</div>
<div class="option" data-answer="incorrect">Automated Program Instruction</div>
<div class="option" data-answer="incorrect">Application Process Interface</div>
</div>
</div>
<div class="slide results-slide" id="slide6">
<div class="question-number">Викторина завершена!</div>
<div class="score-display" id="scoreDisplay">0/5</div>
<div class="score-text" id="scoreText">Отличный результат!</div>
<button class="restart-btn" onclick="restartQuiz()">Начать заново</button>
</div>
<div class="controls">
<button class="control-btn" id="prevBtn" onclick="previousSlide()" disabled>Назад</button>
<button class="control-btn" id="nextBtn" onclick="nextSlide()">Далее</button>
</div>
</div>
<script>
let currentSlide = 0;
let totalSlides = 7;
let score = 0;
let answered = false;
let selectedOption = null;
const slides = document.querySelectorAll('.slide');
const progressFill = document.getElementById('progressFill');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const scoreDisplay = document.getElementById('scoreDisplay');
const scoreText = document.getElementById('scoreText');
function updateProgress() {
const progress = (currentSlide / (totalSlides - 1)) * 100;
progressFill.style.width = progress + '%';
slideCounter.textContent = `${currentSlide + 1} / ${totalSlides}`;
}
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.remove('active', 'prev');
if (i === index) {
slide.classList.add('active');
} else if (i < index) {
slide.classList.add('prev');
}
});
setTimeout(() => {
const activeSlide = slides[index];
const elements = activeSlide.querySelectorAll('.question-number, .question-text, .option, .score-display, .score-text');
elements.forEach((el, i) => {
el.style.animation = 'none';
el.offsetHeight;
el.style.animation = `slideInUp 0.6s ease forwards`;
el.style.animationDelay = `${0.2 + i * 0.1}s`;
});
}, 100);
updateProgress();
updateButtons();
}
function updateButtons() {
prevBtn.disabled = currentSlide === 0;
if (currentSlide === totalSlides - 1) {
nextBtn.style.display = 'none';
} else {
nextBtn.style.display = 'block';
if (currentSlide === 0) {
nextBtn.textContent = 'Начать';
} else if (currentSlide >= 1 && currentSlide <= 5) {
nextBtn.textContent = answered ? 'Далее' : 'Выберите ответ';
nextBtn.disabled = !answered && currentSlide > 0;
} else {
nextBtn.textContent = 'Далее';
nextBtn.disabled = false;
}
}
}
function nextSlide() {
if (currentSlide < totalSlides - 1) {
currentSlide++;
showSlide(currentSlide);
answered = false;
selectedOption = null;
}
}
function previousSlide() {
if (currentSlide > 0) {
currentSlide--;
showSlide(currentSlide);
answered = false;
selectedOption = null;
}
}
function selectOption(option) {
if (answered) return;
const currentSlideElement = slides[currentSlide];
const options = currentSlideElement.querySelectorAll('.option');
options.forEach(opt => {
opt.classList.remove('selected');
});
option.classList.add('selected');
selectedOption = option;
setTimeout(() => {
const isCorrect = option.dataset.answer === 'correct';
options.forEach(opt => {
if (opt.dataset.answer === 'correct') {
opt.classList.add('correct');
} else if (opt === option && !isCorrect) {
opt.classList.add('incorrect');
}
});
if (isCorrect) {
score++;
}
answered = true;
updateButtons();
}, 500);
}
function restartQuiz() {
currentSlide = 0;
score = 0;
answered = false;
selectedOption = null;
slides.forEach(slide => {
const options = slide.querySelectorAll('.option');
options.forEach(option => {
option.classList.remove('selected', 'correct', 'incorrect');
});
});
showSlide(0);
}
function updateResults() {
scoreDisplay.textContent = `${score}/5`;
if (score === 5) {
scoreText.textContent = 'Превосходно! Все ответы верны!';
} else if (score >= 4) {
scoreText.textContent = 'Отлично! Почти все правильно!';
} else if (score >= 3) {
scoreText.textContent = 'Хорошо! Неплохой результат!';
} else if (score >= 2) {
scoreText.textContent = 'Неплохо! Есть над чем поработать!';
} else {
scoreText.textContent = 'Стоит повторить материал!';
}
}
document.addEventListener('DOMContentLoaded', function() {
slides.forEach((slide, slideIndex) => {
const options = slide.querySelectorAll('.option');
options.forEach(option => {
option.addEventListener('click', () => selectOption(option));
});
});
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
if (currentSlide === totalSlides - 1) {
updateResults();
}
}
});
});
slides.forEach(slide => {
observer.observe(slide, { attributes: true });
});
updateButtons();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight' || e.key === ' ') {
e.preventDefault();
if (!nextBtn.disabled) {
nextSlide();
}
} else if (e.key === 'ArrowLeft') {
e.preventDefault();
if (!prevBtn.disabled) {
previousSlide();
}
}
});
</script>
</body>
</html>