Slide to fill the grid!
Target Decimal: {{ s1TargetText }}
Current Amount
{{ (s1CurrentValue / 100).toFixed(2) }}
Drag to match!
Connect the fraction to its decimal twin.
startDrag(e, item)"
@touchstart.passive="false"
@touchstart="e => startDrag(e, item)"
class="drag-item absolute flex items-center justify-center w-[90px] h-[60px] rounded-xl shadow-[0_4px_0_rgba(0,0,0,0.1)] cursor-grab active:cursor-grabbing font-bold text-2xl"
:class="[
item.isLocked ? 'bg-green-100 text-green-700 shadow-none border-2 border-green-400 cursor-default' : 'bg-amber-100 text-amber-800 border-2 border-amber-300',
s2ActiveItem && s2ActiveItem.id === item.id ? 'no-transition z-50 shadow-xl scale-110 opacity-90' : 'transition-all duration-300 z-10'
]"
:style="{ top: item.y + 'px', left: item.x + 'px' }">
{{ item.val }}
Tap the digit!
Build the decimal!
Target Expression
Ones
{{ s4Values.o }}
.
Tenths
{{ s4Values.t }}
Hundredths
{{ s4Values.h }}
Decimal Master!
You've conquered tenths and hundredths.