Slide to set tip
Set the slider to exactly {{ s1.targetTipPercent }}% to see the final bill.
Subtotal:
${{ s1.baseAmount.toFixed(2) }}
+ Tip ({{ s1.sliderValue }}%):
${{ s1.currentTipAmount.toFixed(2) }}
Total:
${{ s1.currentTotal.toFixed(2) }}
0%
15%
30%
Drag the multiplier
To calculate the final price in one step, what decimal do you multiply by? Drag tags to the items.
{{ item.emoji }}
{{ item.text }}
✅
× {{ item.droppedVal.toFixed(2) }}
startDrag(e, mul, idx)"
class="px-5 py-3 bg-white border-2 border-indigo-200 rounded-xl shadow-md font-bold text-xl text-indigo-700 cursor-grab active:cursor-grabbing hover:bg-indigo-50 transition-transform touch-none"
:class="{'opacity-0 pointer-events-none': mul.isUsed}">
× {{ mul.val.toFixed(2) }}
Tap the steps
Find the percent {{ s3.type }}. Build the formula step-by-step.
Old Price
${{ s3.oldPrice }}
➔
New Price
${{ s3.newPrice }}
1. Find the change:
{{ s3.diff }}
2. Divide change by Original:
3. Convert to percent:
{{ s3.percent }}%
Type final price
Calculate the final total based on what you've learned.
🛍️
A ${{ s4.price }} jacket has a
{{ s4.percent }}% {{ s4.type }}.
What is the final price?
$
{{ s4.input || '0' }}
🏆
Percent Master!
You've successfully solved percent increases, decreases, discounts, and tips like a pro.