const questions = [
{
text: 'Выберите верное утверждение',
answers: [
'СССР распался в 1997 году',
'Солнце вращается вокруг Земли',
'шестью восемь - двадцать три',
],
correctAnswer: 1,
},
{
text: '...',
answers: [ '...', '...', ... ],
correctAnswer: ...,
},
...
];function Question(props) {
const onChange = e => props.onAnswerChange(+e.target.value);
return (
<div>
<h3>{props.question.text}</h3>
<ol>
{props.question.answers.map((n, i) => (
<li>
<label>
<input
type="radio"
value={i}
checked={props.answer === i}
onChange={onChange}
/>
{n}
</label>
</li>
))}
</ol>
</div>
);
}function App(props) {
const [ answers, setAnswers ] = useState(Array(props.questions.length).fill(null));
const updateAnswer = (questionIndex, answer) =>
setAnswers(answers.map((n, i) => i === questionIndex ? answer : n));
return (
<div>
{props.questions.map((n, i) => (
<Question
question={n}
answer={answers[i]}
onAnswerChange={answer => updateAnswer(i, answer)}
/>
))}
</div>
);
}не получается сделать грамотную проверку правильного ответа...
const correctAnswersCount = answers.reduce((acc, n, i) => {
return acc + (n === questions[i].correctAnswer);
}, 0);...и одновременно вывести верные ответы
const correctAnswers = questions.map(n => n.answers[n.correctAnswer]);:readonly="`${item.isReadonly}`"false будет "false", а булевым эквивалентом любой непустой строки является true.
Есть поле desc
props: {
active: Boolean,
},data: () => ({
active: null,
}),<v-button
v-for="i in 3"
:active="active === i"
@click="active = active === i ? null : i"
>openItems.forEach(function (formItem) {
formItem.addEventListener('click', function () {
openBtn.innerText = this.innerText;
openList.classList.remove('open');
hiddenInput.value = this.dataset.value;
});
});openList.addEventListener('click', function(e) {
const item = e.target.closest('li.form-item');
if (item) {
openBtn.innerText = item.innerText;
openList.classList.remove('open');
hiddenInput.value = item.dataset.value;
}
});есть свойство для изменения ее цвета, но если убрать сетку с заднего фона, то это свойство не работает
options: {
scales: {
x: {
grid: {
display: false,
borderColor: 'red',
},
},
y: {
grid: {
display: false,
drawBorder: false,
},
},
},
},const newData = data.map((n, i, a) => ({
...n,
newSick: n.sick - (i < ~-a.length && a[-~i].sick),
}));data.forEach((n, i, a) => n.newSick = n.sick - (a[i + 1]?.sick ?? 0));
// или
data.reduceRight((prev, n) => (n.newSick = n.sick - prev, n.sick), 0);const sorted = (arr, key) => arr
.map(n => [ key(n), n ])
.sort(([a], [b]) => a < b ? -1 : +(a > b))
.map(n => n[1]);const sortedArr = sorted(arr, n => n[0].replace(/^\D+/, ''));const sortedArr = sorted(arr, n => {
const d = n[0].match(/\d+/g);
return +d[0] + +d.at(-1);
});activeType указывайте не 0, а нулевой элемент из types:React.useState(0); ---> React.useState(types[0]);
Как сделать, чтобы третье условие работало?
const rectLeftTop = [ 50, 50 ];
const rectSize = 450;
const step = 15;
let [ x, y ] = rectLeftTop;
setInterval(() => {
if (rectLeftTop[1] <= y && x === rectLeftTop[0]) {
y = Math.min(y + step, rectLeftTop[1] + rectSize);
}
if (rectLeftTop[0] <= x && y === rectLeftTop[1] + rectSize) {
x = Math.min(x + step, rectLeftTop[0] + rectSize);
}
if (rectLeftTop[1] < y && x === rectLeftTop[0] + rectSize) {
y = Math.max(y - step, rectLeftTop[1]);
}
if (rectLeftTop[0] < x && y === rectLeftTop[1]) {
x = Math.max(x - step, rectLeftTop[0]);
}
block.style.left = `${x}px`;
block.style.top = `${y}px`;
}, rectSize / step);const directions = [
[ 0, -1 ],
[ -1, 0 ],
[ 0, 1 ],
[ 1, 0 ],
];
let iDirection = 0;
const coords = [ 50, 50 ];
const step = 15;
const rectSize = 450;
const rect = [ [...coords], coords.map(n => n + rectSize) ];
(function move() {
const d = directions[iDirection].map(n => n * step);
coords.forEach((n, i, a) => a[i] = Math.max(rect[0][i], Math.min(rect[1][i], n + d[i])));
if (coords.every((n, i) => rect.some(m => m[i] === n))) {
iDirection = (iDirection + 1) % directions.length;
}
block.style.left = `${coords[0]}px`;
block.style.top = `${coords[1]}px`;
requestAnimationFrame(move);
})();.block {
transition: all 750ms linear;
}const positions = [
[ 50, 50 ],
[ 50, 500 ],
[ 500, 500 ],
[ 500, 50 ],
];
let iPosition = -1;
move();
block.addEventListener('transitionend', move);
setTimeout(move, 0);
function move() {
iPosition = (iPosition + 1) % positions.length;
const [ x, y ] = positions[iPosition].map(n => `${n}px`);
block.style.left = x;
block.style.top = y;
}.block {
animation: move 3s infinite linear;
}
@keyframes move {
0%, 100% {
left: 50px;
top: 50px;
}
25% {
left: 50px;
top: 500px;
}
50% {
left: 500px;
top: 500px;
}
75% {
left: 500px;
top: 50px;
}
}<svg viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg" width="550" height="550">
<rect width="50" height="50" fill="red">
<animateMotion
dur="3s"
repeatCount="indefinite"
path="M50,50 L50,500 L500,500 L500,50 L50,50 z"
/>
</rect>
</svg>V-model="filterPriceFrom"V-model="filterPriceTo"props:['FilterPriceFrom', 'FilterPriceTo', "FilterCategoryId"],
v-model совместно с входными параметрами особого смысла нет. Потому чтоВсе входные параметры образуют одностороннюю привязку между дочерним свойством и родительским: когда родительское свойство обновляется — оно будет передаваться дочернему, но не наоборот.
v-model="параметр" на:value="параметр" @input="$emit('update:параметр', $event.target.value)"let count = 0;
const countEl = document.querySelector('.text');
const buttons = [...document.querySelectorAll('.click')];
const onClick = e => updateCount(e.target.classList.toggle('clicked') ? 1 : -1);
const updateCount = change => countEl.innerText = count += change;
buttons.forEach(n => n.addEventListener('click', onClick));
updateCount(buttons.reduce((acc, n) => acc + n.classList.contains('clicked'), 0));