Vložené kalkulačky: Predpoklady, validácia a príklady

Vložená kalkulačka je interaktívny obsahový prvok, ktorý akceptuje ohraničenú množinu vstupov od čitateľa, aplikuje deklarovaný vzorec alebo model a vracia odhad, ktorý čitateľ dokáže interpretovať. Dôveru si získava tým, že ukazuje, ako bol výsledok vytvorený – nie tým, že aritmetiku robí záhadnou.

Mesačný odhad nákladov na prácu
Úloh za mesiac: 240
Minút na úlohu: 12
Hodinová sadzba včítane nákladov: 36 USD
Odhadované mesačné náklady na prácu: 1 728 USD
Výpočet: 240 × 12 ÷ 60 × 36 USD. Tento odhad nezahŕňa softvér, školenie, prepracovanie ani sezónne zmeny objemu.

Toto kompaktné zobrazenie demonštruje minimálny záväzok: pomenované vstupy s jednotkami, jasne označený odhadovaný výsledok, vzorec v bežnom jazyku a vylúčenia, ktoré udržujú číslo v kontexte. Produkčná verzia umožňuje čitateľovi upraviť tri hodnoty, validuje každé pole a aktualizuje výsledok bez skrývania metódy.

Prečo na tomto prvku záleží

Kalkulačka nahrádza abstraktnú radu dôsledkom viazaným na situáciu čitateľa. „Manuálne spracovanie je drahé“ žiada čitateľa, aby uveril všeobecnému tvrdeniu. „Pri 240 úlohách mesačne, 12 minútach na úlohu a 36 USD za hodinu vrátane nákladov sú modelované náklady na prácu 1 728 USD mesačne“ umožňuje preskúmať predpoklady a rozhodnúť, či výsledok zodpovedá ich prevádzke. Interakcia tiež podporuje premyslené uvažovanie: zadanie počtu úloh a sadzby práce robí nákladové faktory konkrétnymi.

Rovnaká psychologická výhoda sa môže okamžite obrátiť. Výsledok „Mohli by ste ušetriť 48 311 USD“ bez viditeľného vzorca pôsobí ako vyrobený na dosiahnutie predajného čísla. Nadmerná presnosť problém zosilňuje, pretože rozhranie predstiera znalosti, ktoré nemá. Dôvera závisí od vysledovateľnosti: čitateľ musí byť schopný identifikovať každý vstup, jeho jednotku, povolený rozsah, akúkoľvek hodnotu dodanú vydavateľom a to, ako sa tieto hodnoty stávajú výstupom.

Strojová extrahovateľnosť je schopnosť crawlera, AI systému na odpovede, nástroja pre prístupnosť alebo publikačného pipeline zachovať tieto vzťahy bez hádania z vizuálnej pozície. Živý výstup kalkulačky je špecifický pre používateľa a často generovaný v prehliadači, takže nie je stabilným faktom, ktorý by stroj mohol citovať. Okolité HTML preto musí odhaliť účel kalkulačky, popisky vstupov, jednotky, predvolené hodnoty, vzorec, predpoklady, popisok výstupu a vypracovaný príklad. Štruktúrované záznamy zdrojov by mali uchovávať rovnaké polia, aj keď sa renderer zmení z posuvníkov na číselné vstupy.

Pred výberom tohto komponentu aplikujte pravidlá písania prvkov . Účel má prednosť pred vzhľadom: kalkulačku používajte len vtedy, keď hodnoty dodané čitateľom materiálne menia vypočítanú odpoveď. Niekoľko statických štatistík naštýlovaných ako vstupné karty zostáva blokom štatistík a séria vetviacich otázok zostáva rozhodovacím stromom.

Kedy ju použiť

Kalkulačku použite, keď sú splnené tri podmienky. Po prvé, čitateľ vie poskytnúť alebo rozumne odhadnúť požadované vstupy. Po druhé, existuje zdokumentovaný vzorec alebo ohraničený model, ktorý tieto vstupy prepája na užitočný výstup. Po tretie, výstup mení rozhodnutie: rozpočet, kapacitu, množstvo, bod zvratu, dobu splácania, potenciálnu časovú náročnosť alebo iný merateľný ďalší krok.

Silné príklady použitia zahŕňajú odhady celkových nákladov, personálnu kapacitu, množstvo materiálu, porovnanie predplatných, výpočty bodu zvratu, odhady dodania a scenárové modely. Kalkulačka je obzvlášť užitočná, keď by próza vyžadovala, aby čitatelia opakovali aritmetiku pre niekoľko možných prípadov.

Takmer vhodné prípady by mali použiť iný prvok:

• Pevná odpoveď: zverejnite číslo a jeho zdroj. Jedna nemenná hodnota nevyžaduje interakciu.
• Odporúčanie založené na kategóriách: použite rozhodovací strom, keď odpovede smerujú k možnostiam, nie sa matematicky kombinujú.
• Prieskum alebo skóre zostavené z názorov: použite kvíz alebo hodnotenie. Nazývať ľubovoľné skóre výpočtom mu dáva nezaslúženú autoritu.
• Neohraničená prognóza: použite scenárovú prózu alebo graf, keď model závisí od neznámeho správania trhu, ktoré nemožno poctivo vyjadriť ako vstupy.
• Olovená forma s dekoratívnym súčtom: výsledok, ktorý sa zobrazí až po zadaní kontaktných údajov, je konverzná brána, nie vložená kalkulačka.
• Regulované určenie: neprezentujte právnu spôsobilosť, diagnózu, poistné krytie, daňovú povinnosť alebo vhodnosť investície ako definitívny výsledok kalkulačky, pokiaľ to model, posúdenie, jurisdikcia a požadované vyhlásenia nepodporujú.

Kam ju umiestniť

Umiestnite kalkulačku potom, čo čitateľ pochopí, čo sa odhaduje, a predtým, ako článok interpretuje scenáre alebo žiada o komerčnú akciu. Uveďte ju jedným krátkym odsekom, ktorý pomenúva rozhodnutie, výstupnú jednotku a rozsah modelu. Ak nezvyčajné výrazy alebo predvolené hodnoty odvodené zo zdrojov ovplyvňujú výsledok, definujte ihneď pred poliami.

Na vyhradenej stránke nástroja môže kalkulačka nasledovať za hero sekciou a jednou vetou o rozsahu. V sprievodcovi nákladmi ju umiestnite po vysvetlení základných cenových rozpätí a nákladových faktorov. Na stránke produktu alebo služby ju umiestnite po stanovení schopností a obmedzení, ktoré určujú vhodnosť; inak môže rozhranie vyrobiť presvedčivú návratnosť skôr, než čitateľ zistí, či sa ponuka vzťahuje na jeho situáciu.

Vstupnú oblasť, validačné správy, výsledok, vysvetlenie výpočtu, predpoklady a ovládací prvok pre reset uchovávajte vnútri jedného označeného regiónu. Rozšírenú metodológiu a zdroje umiestnite bezprostredne zaň. Prvok nesmie sedieť priamo vedľa inej kalkulačky, konkurenčnej olovenej formy, odpočítavacieho časovača alebo propagačnej karty s výsledkom. Nesmie prerušiť varovanie, oddeliť vstup od jeho jednotky ani umiestniť primárnu výzvu na akciu medzi výsledok a jeho predpoklady. Zobrazte výsledok pred akoukoľvek voliteľnou akciou „poslať tento odhad e-mailom“.

Anatómia

Označený obrázok musí identifikovať tieto časti:

1. Názov a rozsah: pomenujte, čo sa odhaduje, a podmienky, ktoré model pokrýva.
2. Skupina vstupov: ku každej upraviteľnej hodnote uveďte trvalý popisok, jednotku, vhodný ovládací prvok a stručný pomocný text.
3. Obmedzenie: uveďte realistické minimum a maximum pred odoslaním tam, kde limity nie sú zrejmé.
4. Validačná správa: identifikujte pole, problém a spôsob nápravy bez vymazania iných platných vstupov.
5. Akcia výpočtu: poskytnite explicitnú akciu, keď by automatické aktualizácie boli rušivé alebo nákladné.
6. Výsledok: označte výstup ako odhadovaný, zobrazte jeho jednotku a primeranú presnosť a ohláste zmeny asistenčným technológiám.
7. Metóda: odhaľte vzorec alebo postupnosť operácií v bežnom jazyku.
8. Predpoklady a vylúčenia: odlíšte predpoklady dodané vydavateľom od vstupov čitateľa a uveďte, čo model vynecháva.
9. Pôvod: zobrazte zdroj a dátum overenia pre premenlivé predvolené hodnoty, sadzby a hraničné hodnoty.
10. Ovládacie prvky a ďalší krok: poskytnite Reset alebo Začať odznova, nasledované voliteľnou akciou primeranou výsledku.

Príklady dizajnu

Každý variant používa rovnakú sémantickú dohodu. Zmena ovládacích prvkov alebo rozloženia nesmie ticho zmeniť vzorec.

Vložený rýchly odhad

Použite dva až štyri polia a jeden primárny výsledok vnútri vysvetľujúceho článku. Mal by sa zmestiť do stĺpca obsahu a nemal by vyžadovať účet.

Vstup a výsledok vedľa seba

Použite na širších obrazovkách, keď čitatelia potrebujú mať výsledok viditeľný počas úpravy štyroch až ôsmich vstupov. Na úzkych obrazovkách umiestnite vstupy pred výsledky v poradí DOM aj vizuálne.

Porovnanie scenárov

Použite, keď čitatelia ťažia z porovnania súčasného, konzervatívneho a optimistického prípadu. Udržujte rovnaký vzorec a jednotky naprieč stĺpcami a presne uveďte, ktoré vstupy sa líšia. Neoznačujte preferovaný prípad vydavateľa ako „realistický“ bez dôkazov.

Viackroková kalkulačka

Použite len vtedy, keď vstupy prirodzene tvoria fázy, ako je používanie, náklady a potom financovanie. Zobrazujte priebeh, uchovávajte predchádzajúce odpovede, umožnite návrat bez straty údajov a poskytnite úplnú kontrolu pred výpočtom.

Vložená kalkulačka tretej strany

Použite, keď externý špecialista vlastní model, ktorý stránka nemôže zodpovedne reprodukovať. Zobrazte poskytovateľa, oznámenie o zdieľaní údajov, stav načítavania, pevný záložný odkaz a textové zhrnutie rozsahu mimo rámca. Samotný iframe nie je dostatočný obsah.

Parametre

„Zdroj“ nižšie znamená, odkiaľ renderer získava parameter. Nenahrádza výskumný zdroj pre sadzbu alebo predpoklad.

Vzorec považujte za verzovanú produkčnú logiku, nie prózu skopírovanú do šablóny. Vysvetlenie môže byť čitateľsky prívetivé, ale musí zodpovedať testovanej implementácii. Predvolené hodnoty musia byť neutrálne, zdrojované alebo výslovne označené ako príklady; nikdy ich nevyberajte len na maximalizáciu zobrazeného prínosu.

Syntax a príklady kódu

Všetky implementácie nižšie popisujú rovnaké tri vstupy, obmedzenia, vzorec, popisok výsledku a predpoklady. Prenosná direktíva je kanonická autorská reprezentácia.

Prenosná direktíva Markdown

:::calculator-embed{id=monthly-labor-cost currency=USD precision=0 variant=inline verified=2026-08-27}
## Odhadnúť mesačné náklady na prácu

::input{id=tasks label="Tasks per month" type=number unit=tasks min=1 max=100000 step=1}
Zadajte dokončené a pokusné úlohy, ktoré spotrebúvajú čas zamestnancov.
::

::input{id=minutes label="Minutes per task" type=number unit=minutes min=0.1 max=480 step=0.1}
Použite pozorovaný priemer, ak je k dispozícii.
::

::input{id=hourly-cost label="Loaded hourly cost" type=number unit=USD min=1 max=1000 step=0.01}
Zahŕňa mzdy a náklady na prácu hradené zamestnávateľom.
::

Vzorec: tasks * minutes / 60 * hourly-cost
Popisok výsledku: Odhadované mesačné náklady na prácu
Predpoklady: objem je mesačný; priemerný čas spracovania je stabilný.
Vylučuje: softvér, školenie, prepracovanie a sezónne zmeny.
:::

Hugo shortcode

Hugo adaptér by mal používať pomenované rodičovské parametre a typované záznamy tela. Tento zápis definuje zamýšľané mapovanie; netvrdí, že lokálny shortcode už existuje.

{{< calculator-embed id="monthly-labor-cost" currency="USD" precision="0" variant="inline" verified="2026-08-27" >}}
## Odhadnúť mesačné náklady na prácu

{{< calculator-input id="tasks" label="Tasks per month" type="number" unit="tasks" min="1" max="100000" step="1" >}}
Zadajte dokončené a pokusné úlohy, ktoré spotrebúvajú čas zamestnancov.
{{< /calculator-input >}}

{{< calculator-input id="minutes" label="Minutes per task" type="number" unit="minutes" min="0.1" max="480" step="0.1" >}}
Použite pozorovaný priemer, ak je k dispozícii.
{{< /calculator-input >}}

{{< calculator-input id="hourly-cost" label="Loaded hourly cost" type="number" unit="USD" min="1" max="1000" step="0.01" >}}
Zahŕňa mzdy a náklady na prácu hradené zamestnávateľom.
{{< /calculator-input >}}

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

Predpoklady: objem je mesačný; priemerný čas spracovania je stabilný.
{{< /calculator-embed >}}

Renderer musí validovať hodnoty pred výpočtom a znovu všade, kde sa spracúvajú odoslané údaje. Musí vykresliť trvalé elementy <label>, popisy vstupov, chyby na úrovni polí, výsledok <output>, predpoklady a vypracovaný príklad bez skriptu alebo vykreslený serverom.

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>Odhadnúť mesačné náklady na prácu</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>Odhadované mesačné náklady na prácu</p>
<p data-assumptions>Objem je mesačný; priemerný čas spracovania je stabilný.</p>
<!-- /wp:amicited/calculator-embed -->

WordPress môže poskytovať vizuálne ovládacie prvky v editore, ale uložené atribúty a serverom vykreslený výstup musia zachovať dohodu. Vzorec by mal odkazovať na skontrolované ID modelu, nie vykonávať ľubovoľný autorom zadaný kód.

Príklady

Dobrý: výsledok, ktorý čitateľ dokáže reprodukovať

Odhadované mesačné náklady na prácu: 1 728 USD

• Úloh za mesiac: 240
• Priemerných minút na úlohu: 12
• Hodinová sadzba včítane nákladov: 36 USD
• Vzorec: 240 × 12 ÷ 60 × 36 USD
• Predpoklady: mesačný objem úloh a priemerný čas spracovania zostávajú stabilné.
• Vylučuje: softvérové predplatné, školenie, prepracovanie a nárazové zvýšenie dopytu.
• Interpretácia: otestujte prípad s nízkym a vysokým objemom pred použitím odhadu v rozpočte.

Tento príklad je dobrý, pretože vstupy majú jednotky, aritmetika reprodukuje výstup a vylúčenia bránia číslu tvrdiť, že ide o celkové prevádzkové náklady. Výstup používa presnosť na celé doláre, primeranú odhadovaným vstupom.

Zlý: presvedčivé číslo bez modelu

Zadajte zamestnancov: 8
Ušetríte 52 843,17 USD každý rok.
Rezervujte si demo a zistite ako.

Tento príklad je zlý, pretože jeden vstup nedokáže stanoviť úsporu práce, rozsah implementácie, hodinovú sadzbu, mieru prijatia ani prevádzkové náklady. Nevysvetlené presné centy vytvárajú falošnú presnosť, žiadny rozsah nehovorí čitateľovi, ako neistota mení odpoveď, a okamžitá predajná akcia blokuje preskúmanie. Ide o marketingové tvrdenie oblečené do ovládacích prvkov kalkulačky.

Schema markup a prístupnosť

Neexistuje všeobecný typ Schema.org pre vloženú kalkulačku. Označte obklopujúcu stránku podľa jej skutočného účelu, napríklad WebPage, Article, Product alebo SoftwareApplication, ak je to vhodné. Neoznačujte kalkulačku ako HowTo, pokiaľ stránka skutočne neposkytuje postup krok za krokom, a nekódujte odhad špecifický pre návštevníka ako Offer, price, recenziu alebo nameraný výsledok. Vypracovaný príklad môže zostať viditeľným HTML; predpoklady a dôkazy patria do bloku zdrojov , keď sa opierajú o externé alebo premenlivé fakty.

Prístupnosť začína natívnymi ovládacími prvkami a explicitnými vzťahmi. Prepojte každý vstup s elementom <label>, pripojte pomocný a chybový text pomocou aria-describedby, použite inputmode="decimal", kde je to vhodné, a nikdy sa nespoliehajte na text v placeholderi ako na popisok. Uveďte jednotky vedľa poľa a v jeho prístupnom názve, ak zostáva nejednoznačnosť. Nerobte z posuvníkov jedinú vstupnú metódu; poskytnite číselné pole alebo alternatívu ovládateľnú klávesnicou.

Validujte pri strate fokusu alebo pri odoslaní bez vymazania platných hodnôt. Presuňte fokus na zhrnutie chýb až po odoslaní, potom prepojte každú položku zhrnutia s jej poľom. Oznámte zmenený výsledok prostredníctvom slušnej živej oblasti alebo <output aria-live="polite"> bez oznamovania každého stlačenia klávesu. Zachovajte fokus, keď sa výsledok aktualizuje. Farba môže posilniť platné a neplatné stavy, ale nemôže byť jediným signálom.

Kalkulačka musí zostať zrozumiteľná, keď zlyhá JavaScript, iframe alebo poskytovateľ tretej strany. Rezervujte výšku rámca, aby ste zabránili posunom rozloženia, použite popisný title na iframoch, pred interakciou zverejnite údaje odosielané inému poskytovateľovi a ponúknite normálny odkaz alebo vypracovaný príklad ako náhradu. Testovanie s klávesnicou, zoomom, čítačkou obrazovky, redukciou pohybu, obnovou po chybách a na úzkych obrazovkách sú podmienky vydania.

Pravidlá písania

Píšte pre kontrolu, nie pre presviedčanie. Čitateľ by mal byť schopný spochybniť predpoklad bez reverzného inžinierstva rozhrania.

• Názov udržujte na 3–12 slovách a uveďte, aké množstvo sa odhaduje.
• Použite 1–8 vstupov v jednom zobrazení; väčšie modely zoskupte do najviac štyroch zmysluplných krokov.
• Popisky vstupov udržujte na 2–10 slovách a pomocný text na 5–25 slovách.
• Uveďte jednotku v každom kvantitatívnom popisku alebo priľahlom tokene jednotky; nikdy nenechávajte čitateľov hádať, či 12 znamená doláre, mesiace, ľudí alebo percentá.
• Uveďte všetky predpoklady dodané vydavateľom vo viditeľnom zozname 1–8 položiek a identifikujte ich zdroje alebo vlastníkov.
• Zobrazte vzorec, keď bežná aritmetika vysvetľuje model. Pre komplexný model vysvetlite postupnosť, dôležité váhy a podmienky bez odhalenia citlivého kódu.
• Zaokrúhľujte na presnosť podporovanú vstupmi. Odhadované celé hodiny a približné sadzby neospravedlňujú centy.
• Uprednostnite rozsah výsledku, keď neisté predpoklady môžu materiálne zmeniť odpoveď. Pomenujte hodnoty použité pre každú hranicu.
• Používajte neutrálne slovesá ako „odhadnúť“, „porovnať“ a „modelovať“. Vyhnite sa „zaručiť“, „dokázať“, „ušetríte“ a „kvalifikujete sa“, pokiaľ tvrdenie nie je skutočne podložené.
• Nikdy neumiestňujte skryté poplatky, predvybraný marketingový súhlas, nezverejnené sledovanie, vyrobené predvolené hodnoty, referencie, odpočítavania alebo e-mailovú bránu dovnútra kalkulačky.
• Nikdy nepovoľujte surové HTML, skripty, vzdialený kód alebo autorom zadaný spustiteľný výraz v poli vzorca.

Typy príspevkov, ktoré ho používajú

Táto tabuľka odráža registrovaný zoznam postTypes v frontmatter.

Kontrolný zoznam QA

• Kalkulačka rieši reálne numerické rozhodnutie; nie je to maskovaná forma, kvíz ani statické tvrdenie.
• Každý vstup má trvalý popisok, jednotku, pomocný text tam, kde je potrebný, a realistické minimum, maximum a krok.
• Prázdne, nečíselné, záporné, mimo rozsahu, lokalizované desatinné a extrémne veľké hodnoty sú bezpečne ošetrené.
• Predvolené hodnoty sú neutrálne a buď zdrojované, alebo označené ako príklady.
• Implementovaný vzorec zodpovedá viditeľnému vysvetleniu a má verzované unit testy, hraničné testy a reprezentatívne vypracované príklady.
• Výsledky uvádzajú, že ide o odhady, používajú obhájiteľnú presnosť a zobrazujú rozsah, keď si neistota vyžaduje jeden.
• Predpoklady, vylúčenia, vlastníctvo zdrojov a dátum overenia sú viditeľné vedľa výsledku alebo bezprostredne po ňom.
• Zmena jedného vstupu produkuje očakávanú smerovú zmenu a Reset obnovuje zdokumentovaný počiatočný stav.
• Sľúbený výsledok sa zobrazí pred akoukoľvek požiadavkou na e-mail, účet, demo alebo nákup.
• Popisky, chyby, aktualizácie výsledku, ovládacie prvky a poradie fokusu fungujú s klávesnicou a čítačkou obrazovky.
• Prvok zostáva zrozumiteľný bez JavaScriptu a poskytuje náhradu, keď zlyhá vložený prvok tretej strany.
• Mobilné rozloženie udržuje popisky pri poliach, zobrazuje vstupy pred výsledkami a nespôsobuje horizontálne posúvanie na úrovni stránky.
• Žiadny výsledok špecifický pre návštevníka nie je emitovaný ako stabilné schema tvrdenie, referencia alebo zaručený výsledok.
• Analytika zaznamenáva agregované interakčné udalosti bez zachytávania citlivých hodnôt polí, pokiaľ explicitný súhlas a platný účel nepodporujú zber.

FAQ

Otázky nižšie pokrývajú presnosť, indexovanie, zachytávanie leadov, údržbu a progresívne vylepšenie. Ich odpovede sú tiež registrované v frontmatter, aby ich stránka mohla konzistentne zobrazovať prostredníctvom šablóny Academy.