Vložené kalkulačky: Předpoklady, validace a příklady

Vložená kalkulačka je interaktivní obsahový prvek, který přijímá omezenou sadu vstupů od čtenáře, aplikuje deklarovaný vzorec nebo model a vrací odhad, který si čtenář může interpretovat. Získává důvěru tím, že ukazuje, jak byl výsledek vytvořen – ne tím, že by aritmetiku zahalovala tajemstvím.

Měsíční odhad mzdových nákladů
Úkolů za měsíc: 240
Minut na úkol: 12
Hodinová sazba včetně nákladů: 36 $
Odhadované měsíční mzdové náklady: 1 728 $
Výpočet: 240 × 12 ÷ 60 × 36 $. Tento odhad nezahrnuje software, školení, přepracování a sezónní změny objemu.

Toto kompaktní zobrazení představuje minimální smlouvu: pojmenované vstupy s jednotkami, jasně označený odhadovaný výsledek, vzorec v běžném jazyce a vyloučení, která udržují číslo v patřičných mezích. Produkční verze umožní čtenáři upravit všechny tři hodnoty, validuje každé pole a aktualizuje výsledek, aniž by skrývala metodu výpočtu.

Proč na tomto prvku záleží

Kalkulačka nahrazuje abstraktní rady konkrétním důsledkem vázaným na situaci čtenáře. „Ruční zpracování je drahé“ žádá čtenáře, aby uvěřil obecnému tvrzení. „Při 240 úkolech za měsíc, 12 minutách na úkol a 36 $ za hodinu včetně nákladů činí modelované mzdové náklady 1 728 $ měsíčně“ umožňuje čtenáři prozkoumat předpoklady a rozhodnout, zda výsledek odpovídá jeho provozu. Interakce také podporuje promyšlenější uvažování: zadání počtu úkolů a mzdové sazby činí nákladové faktory konkrétními.

Stejná psychologická výhoda se může okamžitě obrátit proti vám. Výsledek „Mohl/a byste ušetřit 48 311 $“ bez viditelného vzorce působí, jako by byl nastevřený k vygenerování prodejního čísla. Nadměrná přesnost problém umocňuje, protože rozhraní předstírá znalosti, které nemá. Důvěra závisí na dohledatelnosti: čtenář musí být schopen identifikovat každý vstup, jeho jednotku, povolený rozsah, případné hodnoty dodané vydavatelem a to, jak se tyto hodnoty stávají výstupem.

Strojová extrahovatelnost je schopnost crawleru, AI odpovědního systému, nástroje pro přístupnost nebo publikačního pipeline zachovat tyto vztahy, aniž by musel hádat z vizuální pozice. Živý výstup kalkulačky je specifický pro konkrétního uživatele a často generovaný v prohlížeči, takže se nejedná o stabilní fakt, který by stroj mohl citovat. Okolní HTML proto musí odhalovat účel kalkulačky, popisky vstupů, jednotky, výchozí hodnoty, vzorec, předpoklady, popisek výstupu a pracovní příklad. Strukturované záznamy zdrojů by měly uchovávat stejná pole, i když se renderovací prvek změní z posuvníků na číselná pole.

Před výběrem této komponenty použijte pravidla pro psaní prvků . Účel má přednost před vzhledem: kalkulačku používejte pouze tehdy, když hodnoty dodané čtenářem materiálně mění vypočítanou odpověď. Několik statických statistik stylizovaných jako vstupní karty zůstává statistickým blokem a série větvících se otázek zůstává rozhodovacím stromem.

Kdy ji použít

Kalkulačku použijte, když jsou splněny tři podmínky. Za prvé, čtenář může dodat nebo rozumně odhadnout požadované vstupy. Za druhé, existuje zdokumentovaný vzorec nebo ohraničený model, který tyto vstupy propojuje s užitečným výstupem. Za třetí, výstup mění rozhodnutí: rozpočet, kapacitu, množství, bod zvratu, dobu splácení, potenciální časovou náročnost nebo jiný měřitelný další krok.

Silné případy použití zahrnují odhady celkových nákladů, personální kapacitu, množství materiálu, srovnání předplatného, výpočty bodu zvratu, odhady dodacích lhůt a scénářové modely. Kalkulačka je zvláště užitečná, když by próza vyžadovala, aby čtenáři opakovali aritmetiku pro několik možných případů.

Blízké případy, které by měly používat jiný prvek:

• Pevná odpověď: zveřejněte číslo a jeho zdroj. Jedna neměnná hodnota nevyžaduje interakci.
• Doporučení založené na kategoriích: použijte rozhodovací strom, když odpovědi směřují k možnostem, nikoliv se matematicky kombinují.
• Průzkum nebo skóre sestavené z názorů: použijte kvíz nebo hodnocení. Nazývat libovolné skóre výpočtem mu dává nezaslouženou autoritu.
• Neohraničená předpověď: použijte scénářovou prózu nebo graf, když model závisí na neznámém chování trhu, které nelze poctivě vyjádřit jako vstupy.
• Lead formulář s dekorativním součtem: výsledek, který se zobrazí až po poskytnutí kontaktních údajů, je konverzní brána, nikoliv vložená kalkulačka.
• Regulované stanovení: nepředkládejte právní způsobilost, diagnózu, pojistné krytí, daňovou povinnost nebo investiční vhodnost jako definitivní výsledek kalkulačky, pokud model, přezkum, jurisdikce a požadovaná prohlášení toto použití nepodporují.

Kam ji umístit

Kalkulačku umístěte poté, co čtenář pochopí, co se odhaduje, a dříve, než článek začne interpretovat scénáře nebo vyzývat ke komerční akci. Uveďte ji jedním krátkým odstavcem, který pojmenuje rozhodnutí, výstupní jednotku a rozsah modelu. Pokud neznámé termíny nebo výchozí hodnoty odvozené ze zdrojů ovlivňují výsledek, definujte je bezprostředně před poli.

Na vyhrazené stránce nástroje může kalkulačka následovat za hero sekcí a jednou větou o rozsahu. V průvodci náklady ji umístěte po vysvětlení základních cenových rozpětí a nákladových faktorů. Na produktové nebo servisní stránce ji umístěte až poté, co schopnosti a omezení stanoví vhodnost; jinak může rozhraní vygenerovat přesvědčivou návratnost dříve, než čtenář ví, zda nabídka platí.

Udržujte vstupní oblast, validační zprávy, výsledek, vysvětlení výpočtu, předpoklady a ovládací prvek pro reset uvnitř jednoho označeného regionu. Rozšířenou metodiku a zdroje umístěte bezprostředně za něj. Prvek nesmí být umístěn přímo vedle jiné kalkulačky, konkurenčního lead formuláře, odpočítávacího časovače nebo propagační výsledkové karty. Nesmí přerušovat varování, oddělovat vstup od jeho jednotky ani umisťovat primární výzvu k akci mezi výsledek a jeho předpoklady. Výsledek zobrazte před jakoukoli volitelnou akcí „poslat odhad e-mailem“.

Anatomie

Označený snímek musí identifikovat tyto části:

1. Nadpis a rozsah: pojmenujte, co se odhaduje a jaké podmínky model pokrývá.
2. Skupina vstupů: každé upravitelné hodnotě přiřaďte trvalý popisek, jednotku, vhodný ovládací prvek a stručnou nápovědu.
3. Omezení: uveďte realistické minimum a maximum před odesláním tam, kde limity nejsou zřejmé.
4. Validační zpráva: identifikujte pole, problém a způsob jeho opravy bez vymazání ostatních platných vstupů.
5. Akce výpočtu: poskytněte explicitní akci, pokud by automatické aktualizace byly rušivé nebo nákladné.
6. Výsledek: označte výstup jako odhad, ukažte jeho jednotku a přiměřenou přesnost a oznamujte aktualizace asistenčním technologiím.
7. Metoda: odhalte vzorec nebo posloupnost operací v běžném jazyce.
8. Předpoklady a vyloučení: odlište předpoklady dodané vydavatelem od vstupů čtenáře a uveďte, co model nezahrnuje.
9. Původ: uveďte zdroj a datum ověření pro volatilní výchozí hodnoty, sazby a prahové hodnoty.
10. Ovládání a další krok: poskytněte tlačítko Resetovat nebo Začít znovu, následované volitelnou akcí odpovídající výsledku.

Příklady designu

Každá varianta používá stejnou sémantickou smlouvu. Změna ovládacích prvků nebo rozvržení nesmí tiše změnit vzorec.

Rychlý odhad v řádku

Použijte dva až čtyři vstupy a jeden primární výsledek uvnitř vysvětlujícího článku. Měl by se vejít do obsahového sloupce a neměl by vyžadovat účet.

Vstup a výsledek vedle sebe

Použijte na širších obrazovkách, když čtenáři potřebují, aby výsledek zůstal viditelný při úpravě čtyř až osmi vstupů. Na úzkých obrazovkách umístěte vstupy před výsledky v DOM i vizuálním pořadí.

Srovnání scénářů

Použijte, když čtenáři těží z porovnání současného, konzervativního a optimistického scénáře. Udržujte stejný vzorec a jednotky napříč sloupci a přesně uveďte, které vstupy se liší. Neoznačujte preferovaný scénář vydavatele jako „realistický“ bez důkazů.

Vícekroková kalkulačka

Použijte pouze tehdy, když vstupy přirozeně tvoří fáze, například využití, náklady a poté financování. Zobrazujte průběh, uchovávejte dřívější odpovědi, umožněte návrat zpět bez ztráty dat a před výpočtem poskytněte úplný přehled.

Vložená kalkulačka třetí strany

Použijte, když externí specialista vlastní model, který web nemůže zodpovědně reprodukovat. Zobrazte poskytovatele, oznámení o sdílení dat, stav načítání, pevný záložní odkaz a textové shrnutí rozsahu mimo rámeček. Samotný iframe není dostatečný obsah.

Parametry

„Zdroj“ níže znamená, odkud renderovací prvek parametr získává. Nenahrazuje výzkumný zdroj pro sazbu nebo předpoklad.

S formula zacházejte jako s verzovanou produkční logikou, nikoli jako s prózou zkopírovanou do šablony. Vysvětlení může být přátelské ke čtenáři, ale musí odpovídat testované implementaci. Výchozí hodnoty musí být neutrální, doložené zdrojem nebo explicitně označené jako příklady; nikdy je nevybírejte pouze za účelem maximalizace zobrazeného přínosu.

Syntaxe a příklady kódu

Všechny níže uvedené implementace popisují stejné tři vstupy, omezení, vzorec, popisek výsledku a předpoklady. Přenosná direktiva je kanonická autorská reprezentace.

Přenosná Markdown direktiva

:::calculator-embed{id=monthly-labor-cost currency=USD precision=0 variant=inline verified=2026-08-27}
## Odhad měsíčních mzdových nákladů

::input{id=tasks label="Tasks per month" type=number unit=tasks min=1 max=100000 step=1}
Zadejte dokončené i započaté úkoly, které spotřebovávají čas zaměstnanců.
::

::input{id=minutes label="Minutes per task" type=number unit=minutes min=0.1 max=480 step=0.1}
Pokud je k dispozici, použijte pozorovaný průměr.
::

::input{id=hourly-cost label="Loaded hourly cost" type=number unit=USD min=1 max=1000 step=0.01}
Zahrňte mzdy a náklady na zaměstnance hrazené zaměstnavatelem.
::

Vzorec: tasks * minutes / 60 * hourly-cost
Popisek výsledku: Estimated monthly labor cost
Předpoklady: objem je měsíční; průměrná doba zpracování je stabilní.
Nezahrnuje: software, školení, přepracování a sezónní změny.
:::

Hugo shortcode

Hugo adaptér by měl používat pojmenované rodičovské parametry a typovaná těla záznamů. Tento zápis definuje zamýšlené mapování; netvrdí, že lokální shortcode již existuje.

{{< calculator-embed id="monthly-labor-cost" currency="USD" precision="0" variant="inline" verified="2026-08-27" >}}
## Odhad měsíčních mzdových nákladů

{{< calculator-input id="tasks" label="Tasks per month" type="number" unit="tasks" min="1" max="100000" step="1" >}}
Zadejte dokončené i započaté úkoly, které spotřebovávají čas zaměstnanců.
{{< /calculator-input >}}

{{< calculator-input id="minutes" label="Minutes per task" type="number" unit="minutes" min="0.1" max="480" step="0.1" >}}
Pokud je k dispozici, použijte pozorovaný průměr.
{{< /calculator-input >}}

{{< calculator-input id="hourly-cost" label="Loaded hourly cost" type="number" unit="USD" min="1" max="1000" step="0.01" >}}
Zahrňte mzdy a náklady na zaměstnance hrazené zaměstnavatelem.
{{< /calculator-input >}}

Vzorec: `tasks * minutes / 60 * hourly-cost`

Předpoklady: objem je měsíční; průměrná doba zpracování je stabilní.
{{< /calculator-embed >}}

Renderovací prvek musí validovat hodnoty před výpočtem a znovu všude, kde jsou odeslaná data zpracovávána. Musí vykreslovat trvalé elementy <label>, popisy vstupů, chyby na úrovni polí, výsledek <output>, předpoklady a pracovní příklad bez skriptů nebo vykreslený na serveru.

WordPress blok

<!-- wp:amicited/calculator-embed {"id":"monthly-labor-cost","currency":"USD","precision":0,"variant":"inline","verified":"2026-08-27","formula":"labor-cost-v1"} -->
<h2>Odhad měsíčních mzdových nákladů</h2>
<!-- wp:amicited/calculator-input {"id":"tasks","label":"Tasks per month","type":"number","unit":"tasks","min":1,"max":100000,"step":1} /-->
<!-- wp:amicited/calculator-input {"id":"minutes","label":"Minutes per task","type":"number","unit":"minutes","min":0.1,"max":480,"step":0.1} /-->
<!-- wp:amicited/calculator-input {"id":"hourly-cost","label":"Loaded hourly cost","type":"number","unit":"USD","min":1,"max":1000,"step":0.01} /-->
<p data-result-label>Estimated monthly labor cost</p>
<p data-assumptions>Volume is monthly; average handling time is stable.</p>
<!-- /wp:amicited/calculator-embed -->

WordPress může v editoru poskytovat vizuální ovládací prvky, ale uložené atributy a serverově vykreslený výstup musí zachovávat smlouvu. Vzorec by měl odkazovat na recenzované ID modelu, nikoli spouštět libovolný kód zadaný autorem.

Příklady

Dobrý: výsledek, který si čtenář může ověřit

Odhadované měsíční mzdové náklady: 1 728 $

• Úkolů za měsíc: 240
• Průměrná doba na úkol: 12 minut
• Hodinová sazba včetně nákladů: 36 $
• Vzorec: 240 × 12 ÷ 60 × 36 $
• Předpoklady: měsíční objem úkolů a průměrná doba zpracování zůstávají stabilní.
• Nezahrnuje: předplatné softwaru, školení, přepracování a výkyvy poptávky.
• Interpretace: před použitím odhadu v rozpočtu otestujte případ s nízkým a vysokým objemem.

Tento příklad je dobrý, protože vstupy mají jednotky, aritmetika reprodukuje výstup a vyloučení brání tomu, aby číslo předstíralo, že je celkovými provozními náklady. Výstup používá přesnost na celé dolary, což je vhodné pro odhadované vstupy.

Špatný: přesvědčivé číslo bez modelu

Zadejte počet zaměstnanců: 8
Ušetříte 52 843,17 $ každý rok.
Domluvte si demo a uvidíte, jak na to.

Tento příklad je špatný, protože jeden vstup nemůže stanovit úsporu práce, rozsah implementace, hodinovou sazbu, míru adopce ani provozní náklady. Nevysvětlené přesné centy vytvářejí falešnou přesnost, žádné rozmezí neříká čtenáři, jak nejistota mění odpověď, a okamžitá prodejní akce blokuje prověření. Jedná se o marketingové tvrzení v rouše kalkulačky.

Schema markup a přístupnost

Neexistuje obecný typ Schema.org pro vloženou kalkulačku. Označte obklopující stránku podle jejího skutečného účelu, například WebPage, Article, Product nebo SoftwareApplication, pokud je to vhodné. Neoznačujte kalkulačku jako HowTo, pokud stránka skutečně neposkytuje postup krok za krokem, a nekódujte odhad specifický pro návštěvníka jako Offer, price, recenzi nebo naměřený výsledek. Pracovní příklad může zůstat viditelným HTML; předpoklady a důkazy patří do bloku zdrojů , pokud se opírají o externí nebo volatilní fakta.

Přístupnost začíná nativními ovládacími prvky a explicitními vztahy. Ke každému vstupu přiřaďte <label>, propojte nápovědu a chybový text s aria-describedby, použijte inputmode="decimal" tam, kde je to vhodné, a nikdy nespoléhejte na text placeholderu jako na popisek. Uveďte jednotky vedle pole a v jeho přístupném názvu, pokud přetrvává nejednoznačnost. Nedělejte posuvníky jedinou metodou zadávání; poskytněte číselné pole nebo alternativu ovladatelnou klávesnicí.

Validujte při opuštění pole nebo při odeslání, aniž byste mazali platné hodnoty. Přesuňte fokus na shrnutí chyb až po odeslání, poté propojte každou položku shrnutí s jejím polem. Oznamujte změněný výsledek prostřednictvím zdvořilé živé oblasti (polite live region) nebo <output aria-live="polite">, aniž byste oznamovali každý úhoz. Zachovejte fokus při aktualizaci výsledku. Barva může posilovat platný a neplatný stav, ale nesmí být jediným signálem.

Kalkulačka musí zůstat srozumitelná, když selže JavaScript, iframe nebo poskytovatel třetí strany. Rezervujte výšku rámečku, abyste předešli posunům rozvržení, použijte popisný title na iframech, zveřejněte data odesílaná jinému poskytovateli před interakcí a nabídněte běžný odkaz nebo pracovní příklad jako záložní řešení. Testování s klávesnicí, zoomem, čtečkou obrazovky, režimem se sníženým pohybem, obnovou po chybách a úzkým zobrazením jsou požadavky pro vydání.

Pravidla psaní

Pište pro kontrolu, nikoli pro přesvědčování. Čtenář by měl být schopen zpochybnit předpoklad, aniž by musel reverse-engineerovat rozhraní.

• Udržujte nadpis na 3–12 slovech a uveďte, co se odhaduje.
• Používejte 1–8 vstupů v jednom zobrazení; větší modely seskupte maximálně do čtyř smysluplných kroků.
• Udržujte popisky vstupů na 2–10 slovech a nápovědu na 5–25 slovech.
• Uveďte jednotku v každém kvantitativním popisku nebo vedle něj; nikdy nenechávejte čtenáře hádat, zda 12 znamená dolary, měsíce, lidi nebo procenta.
• Uveďte všechny předpoklady dodané vydavatelem ve viditelném seznamu o 1–8 položkách a identifikujte jejich zdroje nebo vlastníky.
• Zobrazte vzorec, pokud běžná aritmetika vysvětluje model. U komplexního modelu vysvětlete posloupnost, důležité váhy a podmínky, aniž byste odhalovali citlivý kód.
• Zaokrouhlujte na přesnost podporovanou vstupy. Odhadované celé hodiny a přibližné sazby neospravedlňují centy.
• Upřednostněte rozmezí výsledku, pokud nejisté předpoklady mohou materiálně změnit odpověď. Pojmenujte hodnoty použité pro každou hranici.
• Používejte neutrální slovesa jako „odhadnout“, „porovnat“ a „modelovat“. Vyhněte se „zaručit“, „dokázat“, „ušetříte“ a „máte nárok“, pokud tvrzení není skutečně podloženo.
• Nikdy neumisťujte do kalkulačky skryté poplatky, předvybraný marketingový souhlas, neutajené sledování, smyšlené výchozí hodnoty, reference, odpočítávání nebo e-mailovou bránu.
• Nikdy nepovolujte surové HTML, skripty, vzdálený kód ani autorem zadaný spustitelný výraz v poli vzorce.

Typy stránek, které ji používají

Tato tabulka odráží registrovaný seznam postTypes v front matter.

Kontrolní seznam QA

• Kalkulačka řeší reálné numerické rozhodnutí; není to maskovaný formulář, kvíz nebo statické tvrzení.
• Každý vstup má trvalý popisek, jednotku, případnou nápovědu a realistické minimum, maximum a krok.
• Prázdné, nečíselné, záporné, mimo rozsah, lokalizovaná desetinná čísla a extrémně velké hodnoty jsou bezpečně ošetřeny.
• Výchozí hodnoty jsou neutrální a buď doložené zdrojem, nebo označené jako příklady.
• Implementovaný vzorec odpovídá viditelnému vysvětlení a má verzované unit testy, boundary testy a reprezentativní pracovní příklady.
• Výsledky uvádějí, že se jedná o odhady, používají obhajitelnou přesnost a zobrazují rozmezí tam, kde si nejistota vyžaduje.
• Předpoklady, vyloučení, vlastnictví zdrojů a datum ověření jsou viditelné vedle nebo bezprostředně za výsledkem.
• Změna jednoho vstupu vede k očekávané směrové změně a Reset obnoví zdokumentovaný počáteční stav.
• Slíbený výsledek se zobrazí před jakoukoli žádostí o e-mail, účet, demo nebo nákup.
• Popisky, chyby, aktualizace výsledků, ovládací prvky a pořadí fokusu fungují s klávesnicí a čtečkou obrazovky.
• Prvek zůstává srozumitelný bez JavaScriptu a poskytuje záložní řešení, pokud embed třetí strany selže.
• Mobilní rozvržení udržuje popisky u polí, zobrazuje vstupy před výsledky a nezpůsobuje horizontální posouvání na úrovni stránky.
• Žádný výsledek specifický pro návštěvníka není emitován jako stabilní schema tvrzení, reference nebo zaručený výsledek.
• Analytika zaznamenává agregované interakční události bez zachycování citlivých hodnot polí, pokud explicitní souhlas a platný účel sběr nepodporují.

FAQ

Níže uvedené otázky pokrývají přesnost, indexování, získávání leadů, údržbu a progresivní vylepšení. Jejich odpovědi jsou rovněž registrovány v front matter, aby je stránka mohla konzistentně vykreslovat pomocí šablony Academy.