https://pastein.ru/t/W7q
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Математика — карточки</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Arial, sans-serif;
}
body{
background:#000;
color:#fff;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
}
.app{
width:100%;
max-width:900px;
}
.top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
gap:10px;
flex-wrap:wrap;
}
.counter{
font-size:22px;
font-weight:900;
}
.progress{
font-size:18px;
opacity:.8;
}
.scene{
width:100%;
height:500px;
perspective:1200px;
}
.card{
width:100%;
height:100%;
position:relative;
transform-style:preserve-3d;
transition:transform .6s;
cursor:pointer;
}
.card.flipped{
transform:rotateY(180deg);
}
.side{
position:absolute;
width:100%;
height:100%;
border-radius:28px;
border:2px solid #222;
background:#050505;
backface-visibility:hidden;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
font-size:28px;
font-weight:900;
line-height:1.5;
box-shadow:0 0 30px rgba(255,255,255,.05);
overflow:auto;
}
.back{
transform:rotateY(180deg);
}
.buttons{
margin-top:25px;
display:flex;
gap:20px;
}
button{
flex:1;
padding:18px;
border-radius:18px;
border:2px solid transparent;
color:#fff;
font-size:22px;
font-weight:900;
cursor:pointer;
transition:.2s;
backdrop-filter: blur(8px);
}
button:hover{
transform:scale(1.03);
}
.know{
background:rgba(0,255,120,.15);
border-color:rgba(0,255,120,.5);
}
.dont{
background:rgba(255,0,0,.15);
border-color:rgba(255,0,0,.5);
}
.restart{
background:#111;
border:2px solid #444;
}
.hidden{
display:none;
}
.finish{
text-align:center;
padding:40px;
}
.finish h1{
font-size:42px;
margin-bottom:20px;
}
.finish p{
font-size:24px;
opacity:.8;
margin-bottom:30px;
}
@media(max-width:700px){
.side{
font-size:22px;
padding:25px;
}
button{
font-size:18px;
padding:15px;
}
.scene{
height:430px;
}
}
</style>
</head>
<body>
<div class="app">
<div class="top">
<div class="counter" id="counter"></div>
<div class="progress" id="progress"></div>
</div>
<div id="studyArea">
<div class="scene">
<div class="card" id="card">
<div class="side front" id="question"></div>
<div class="side back" id="answer"></div>
</div>
</div>
<div class="buttons">
<button class="know" onclick="markKnow()">ЗНАЮ</button>
<button class="dont" onclick="markDontKnow()">НЕ ЗНАЮ</button>
</div>
</div>
<div class="finish hidden" id="finish">
<h1>Готово</h1>
<p id="finishText"></p>
<div class="buttons">
<button class="dont" id="repeatWrongBtn">
Повторить не знающие
</button>
<button class="restart" onclick="restartAll()">
Повторить всё заново
</button>
</div>
</div>
</div>
<script>
const cards = [
{
q:"1. Что такое вектор?",
a:"Вектор — направленный отрезок, имеющий начало и конец. Характеризуется длиной и направлением."
},
{
q:"2. Изображение векторов на плоскости и в пространстве.",
a:"Стрелка от точки A (начало) к точке B (конец). Обозначается AB⃗ или a⃗."
},
{
q:"3. Длина вектора.",
a:"Длина — расстояние от начала до конца вектора. Обозначается |a⃗| или |AB⃗|."
},
{
q:"4. Коллинеарные векторы.",
a:"Векторы, лежащие на одной прямой или на параллельных прямых."
},
{
q:"5. Сонаправленные и противоположно направленные.",
a:"Сонаправленные — коллинеарные, направлены в одну сторону. Противоположно направленные — направлены в разные стороны."
},
{
q:"6. Изображение сонаправленных и противоположных.",
a:"Сонаправленные — стрелки в одну сторону. Противоположно направленные — стрелки в противоположные стороны."
},
{
q:"7. Равные векторы.",
a:"Сонаправленные векторы равной длины."
},
{
q:"8. Сложение по правилу треугольника.",
a:"От конца вектора a⃗ откладываем вектор b⃗. Сумма a⃗+b⃗ — вектор от начала a⃗ к концу b⃗."
},
{
q:"9. Вычитание по правилу треугольника.",
a:"Векторы a⃗ и b⃗ откладываем из одной точки. Разность a⃗−b⃗ — вектор от конца b⃗ к концу a⃗."
},
{
q:"10. Сложение по правилу параллелограмма.",
a:"Векторы a⃗ и b⃗ откладываем из одной точки и достраиваем до параллелограмма. Сумма — диагональ."
},
{
q:"11. Правило многоугольника.",
a:"Векторы откладываем последовательно (конец к началу). Сумма — вектор от начала первого до конца последнего."
},
{
q:"12. Компланарные векторы.",
a:"Векторы, лежащие в одной плоскости или в параллельных плоскостях."
},
{
q:"13. Условие компланарности трёх векторов.",
a:"Смешанное произведение равно нулю: (a⃗,b⃗,c⃗)=0."
},
{
q:"14. Прямоугольная система координат в пространстве.",
a:"Три взаимно перпендикулярные оси Ox, Oy, Oz с общим началом O."
},
{
q:"15. Координатные (единичные) векторы.",
a:"Векторы i⃗,j⃗,k⃗ единичной длины."
},
{
q:"16. Координаты вектора.",
a:"a⃗ = x i⃗ + y j⃗ + z k⃗ ⇒ a⃗=(x;y;z)."
},
{
q:"17. Координаты равных векторов.",
a:"У равных векторов соответствующие координаты равны."
},
{
q:"18. Координаты суммы a⃗+b⃗.",
a:"(x1+x2; y1+y2; z1+z2)."
},
{
q:"19. Координаты разности a⃗−b⃗.",
a:"(x1−x2; y1−y2; z1−z2)."
},
{
q:"20. Координаты вектора k⋅a⃗.",
a:"(kx1; ky1; kz1)."
},
{
q:"21. Координаты вектора AB⃗.",
a:"(x2−x1; y2−y1; z2−z1)."
},
{
q:"22. Длина вектора.",
a:"|a⃗| = √(x²+y²+z²)."
},
{
q:"23. Расстояние между точками.",
a:"√((x2−x1)²+(y2−y1)²+(z2−z1)²)."
},
{
q:"24. Уравнение сферы.",
a:"(x−x0)²+(y−y0)²+(z−z0)²=R²."
},
{
q:"25. Условие коллинеарности.",
a:"a⃗ = k⋅b⃗."
},
{
q:"26. Скалярное произведение.",
a:"a⃗⋅b⃗ = |a⃗||b⃗|cosφ."
},
{
q:"27. Скалярное произведение через координаты.",
a:"x1x2+y1y2+z1z2."
},
{
q:"28. Косинус угла между векторами.",
a:"cosφ=(x1x2+y1y2+z1z2)/(|a⃗||b⃗|)."
},
{
q:"29. Условие перпендикулярности.",
a:"a⃗⋅b⃗=0."
},
{
q:"30. Условие сонаправленности.",
a:"a⃗=k⋅b⃗ при k>0."
},
{
q:"31. Условие противоположной направленности.",
a:"a⃗=k⋅b⃗ при k<0."
},
{
q:"32. Уравнение плоскости.",
a:"Ax+By+Cz+D=0."
},
{
q:"33. Расстояние от точки до плоскости.",
a:"d=|Ax0+By0+Cz0+D|/√(A²+B²+C²)."
},
{
q:"34. Виды задания прямой.",
a:"Общее, с угловым коэффициентом, каноническое, параметрическое и др."
},
{
q:"35. Уравнение прямой с угловым коэффициентом.",
a:"y=kx+b."
},
{
q:"36. Общее уравнение прямой.",
a:"Ax+By+C=0."
},
{
q:"37. Частные случаи общего уравнения.",
a:"C=0 — через начало координат; A=0 — параллельна Ox; B=0 — параллельна Oy."
},
{
q:"38. Уравнение прямой в отрезках.",
a:"x/a + y/b =1."
},
{
q:"39. Через точку с углом наклона.",
a:"y−y0=k(x−x0)."
},
{
q:"40. Через две точки.",
a:"(x−x1)/(x2−x1)=(y−y1)/(y2−y1)."
},
{
q:"41. Нормальное уравнение прямой.",
a:"xcosα+ysinα−p=0."
},
{
q:"42. Угол между прямыми.",
a:"Острый угол, образованный при пересечении."
},
{
q:"43. Условие параллельности.",
a:"k1=k2."
},
{
q:"44. Условие перпендикулярности.",
a:"k1⋅k2=−1."
},
{
q:"45. Условие параллельности (общий вид).",
a:"A1/A2 = B1/B2."
},
{
q:"46. Условие перпендикулярности (общий вид).",
a:"A1A2+B1B2=0."
},
{
q:"47. Расстояние от точки до прямой.",
a:"d=|Ax0+By0+C|/√(A²+B²)."
},
{
q:"48. Общее уравнение кривой второго порядка.",
a:"Ax²+Bxy+Cy²+Dx+Ey+F=0."
},
{
q:"49. Определение окружности.",
a:"Геометрическое место точек, равноудалённых от центра."
},
{
q:"50. Каноническое уравнение окружности.",
a:"(x−x0)²+(y−y0)²=R²."
},
{
q:"51. Определение эллипса.",
a:"Сумма расстояний до фокусов постоянна."
},
{
q:"52. Каноническое уравнение эллипса.",
a:"x²/a² + y²/b² =1."
},
{
q:"53. Эллипс: полуоси, фокусы.",
a:"r1+r2=2a."
},
{
q:"54. Эксцентриситет эллипса.",
a:"ε=c/a, 0<ε<1."
},
{
q:"55. Определение гиперболы.",
a:"Модуль разности расстояний до фокусов постоянен."
},
{
q:"56. Каноническое уравнение гиперболы.",
a:"x²/a² − y²/b² =1."
},
{
q:"57. Гипербола: полуоси, фокусы.",
a:"|r1−r2|=2a."
},
{
q:"58. Эксцентриситет и асимптоты гиперболы.",
a:"ε=c/a, y=±(b/a)x."
},
{
q:"59. Определение параболы.",
a:"Точки равноудалены от фокуса и директрисы."
},
{
q:"60. Каноническое уравнение параболы.",
a:"y²=2px."
},
{
q:"61. Парабола: параметр, фокус.",
a:"Фокус F(p/2;0)."
},
{
q:"62. Уравнение директрисы параболы.",
a:"x=−p/2."
}
];
let current = 0;
let wrongCards = [];
let activeDeck = [...cards];
const card = document.getElementById("card");
const question = document.getElementById("question");
const answer = document.getElementById("answer");
const counter = document.getElementById("counter");
const progress = document.getElementById("progress");
card.addEventListener("click",()=>{
card.classList.toggle("flipped");
});
function renderCard(){
const item = activeDeck[current];
question.innerHTML = item.q;
answer.innerHTML = item.a;
card.classList.remove("flipped");
counter.innerHTML = `Карточка ${current+1} / ${activeDeck.length}`;
progress.innerHTML = `Не знаешь: ${wrongCards.length}`;
}
function nextCard(){
current++;
if(current >= activeDeck.length){
finishRound();
return;
}
renderCard();
}
function markKnow(){
nextCard();
}
function markDontKnow(){
wrongCards.push(activeDeck[current]);
nextCard();
}
function finishRound(){
document.getElementById("studyArea").classList.add("hidden");
document.getElementById("finish").classList.remove("hidden");
document.getElementById("finishText").innerHTML =
`Не знаешь карточек: ${wrongCards.length}`;
const repeatWrongBtn = document.getElementById("repeatWrongBtn");
if(wrongCards.length === 0){
repeatWrongBtn.style.display = "none";
}else{
repeatWrongBtn.style.display = "block";
}
}
document.getElementById("repeatWrongBtn").addEventListener("click",()=>{
activeDeck = [...wrongCards];
wrongCards = [];
current = 0;
document.getElementById("finish").classList.add("hidden");
document.getElementById("studyArea").classList.remove("hidden");
renderCard();
});
function restartAll(){
activeDeck = [...cards];
wrongCards = [];
current = 0;
document.getElementById("finish").classList.add("hidden");
document.getElementById("studyArea").classList.remove("hidden");
renderCard();
}
renderCard();
</script>
</body>
</html>