Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | /**
* DifficultyLevelSelector.js
*
* Komponent do wyboru poziomu trudności dla ćwiczeń matematycznych.
* Oferuje wybór między poziomami: podstawowy, średni i zaawansowany.
*/
export default {
name: 'DifficultyLevelSelector',
props: {
value: {
type: String,
default: null
},
disabledLevels: {
type: Array,
default: () => []
},
hideLabels: {
type: Boolean,
default: false
},
exerciseType: {
type: String,
required: true
}
},
data() {
return {
levels: [
{
id: 'basic',
title: 'Podstawowy',
description: this.getDescription('basic'),
icon: '🔰',
color: 'bg-green-100 border-green-500'
},
{
id: 'intermediate',
title: 'Średni',
description: this.getDescription('intermediate'),
icon: '🔷',
color: 'bg-blue-100 border-blue-500'
},
{
id: 'advanced',
title: 'Zaawansowany',
description: this.getDescription('advanced'),
icon: '⭐',
color: 'bg-purple-100 border-purple-500'
}
]
};
},
methods: {
/**
* Zwraca opis dla wybranego poziomu trudności w zależności od typu ćwiczenia
* @param {String} level - identyfikator poziomu trudności
* @returns {String} - opis poziomu trudności
*/
getDescription(level) {
const descriptions = {
divide: {
basic: 'Dzielenie z wynikiem całkowitym (bez reszty)',
intermediate: 'Dzielenie z resztą, wymagające podania wyniku i reszty',
advanced: 'Zadania mieszane, w tym bardziej złożone dzielenia'
},
multiply: {
basic: 'Mnożenie prostych liczb (1-10)',
intermediate: 'Mnożenie liczb wielocyfrowych',
advanced: 'Mieszane zadania, łączące różne operacje matematyczne'
},
add: {
basic: 'Dodawanie liczb jednocyfrowych',
intermediate: 'Dodawanie liczb wielocyfrowych',
advanced: 'Dodawanie z innymi operacjami'
},
subtract: {
basic: 'Odejmowanie bez pożyczania',
intermediate: 'Odejmowanie z pożyczaniem',
advanced: 'Odejmowanie z innymi operacjami'
},
compare: {
basic: 'Porównywanie prostych liczb',
intermediate: 'Porównywanie wyrażeń',
advanced: 'Mieszane zadania porównywania'
},
equations: {
basic: 'Proste równania z jedną niewiadomą',
intermediate: 'Równania z różnymi operacjami',
advanced: 'Złożone równania'
}
};
// Fallback, jeśli nie ma opisu dla danego typu ćwiczenia
if (!descriptions[this.exerciseType]) {
return {
basic: 'Poziom podstawowy',
intermediate: 'Poziom średnio zaawansowany',
advanced: 'Poziom zaawansowany'
}[level];
}
return descriptions[this.exerciseType][level];
},
/**
* Obsługuje zmianę poziomu trudności
* @param {String} levelId - identyfikator wybranego poziomu
*/
handleLevelChange(levelId) {
if (this.disabledLevels.includes(levelId)) {
return;
}
this.$emit('input', levelId);
this.$emit('change', levelId);
},
/**
* Sprawdza czy poziom jest aktualnie wybrany
* @param {String} levelId - identyfikator poziomu
* @returns {Boolean} - czy poziom jest wybrany
*/
isSelected(levelId) {
return this.value === levelId;
},
/**
* Sprawdza czy poziom jest wyłączony (niedostępny)
* @param {String} levelId - identyfikator poziomu
* @returns {Boolean} - czy poziom jest wyłączony
*/
isDisabled(levelId) {
return this.disabledLevels.includes(levelId);
},
/**
* Zwraca klasy CSS dla elementu poziomu trudności
* @param {String} levelId - identyfikator poziomu trudności
* @returns {Object} - obiekt z klasami CSS
*/
getLevelClasses(levelId) {
const level = this.levels.find(l => l.id === levelId);
const isSelected = this.isSelected(levelId);
const isDisabled = this.isDisabled(levelId);
return {
[level.color]: true,
'opacity-50 cursor-not-allowed': isDisabled,
'border-2': isSelected,
'border border-gray-300': !isSelected,
'cursor-pointer': !isDisabled,
'transform hover:scale-105 transition-transform': !isDisabled
};
}
},
template: `
<div class="difficulty-level-selector">
<div class="flex flex-wrap justify-center gap-4">
<div
v-for="level in levels"
:key="level.id"
@click="handleLevelChange(level.id)"
:class="getLevelClasses(level.id)"
class="p-4 rounded-lg transition-all duration-200 shadow-sm flex flex-col items-center"
>
<div class="text-3xl mb-2">{{ level.icon }}</div>
<h3 class="font-semibold text-center" v-if="!hideLabels">{{ level.title }}</h3>
<p class="text-sm text-center mt-1" v-if="!hideLabels">{{ level.description }}</p>
</div>
</div>
</div>
`
}; |