Bmi Rechner Simple: In Module Page

Ready

HTML
View
Context
Info
Notes


        
        <div class="o-calculator-package js-calculator-targeting" data-calculator-config="{&quot;bmi_1&quot;: [&quot;id_1&quot;],&quot;bmi_2&quot;: [&quot;id_2&quot;], &quot;bmi_3&quot;: [&quot;id_3&quot;], &quot;bmi_4&quot;: [&quot;id_4&quot;],&quot;bmi_5&quot;: [&quot;id_4&quot;], &quot;bmi_6&quot;: [&quot;id_4&quot;, &quot;id_5&quot;]}">

    <!--
      {
        "bmi_1": ["id_1"],
        "bmi_2": ["id_2"],
        "bmi_3": ["id_3"],
        "bmi_4": ["id_4"],
        "bmi_5": ["id_4"],
        "bmi_6": ["id_4", "id_1"],
      }
      -->

    <div class="o-calculator calculator--bmi-simple js-calculator-bmi-simple-init ">

        <noscript>
            <div class="calculator__noscript-hint">
                <p>In Ihrem Webbrowser ist JavaScript deaktiviert - Sie können den BMI-Rechner auf dieser Seite daher nicht in interaktiver Form nutzen. Wenn Sie Ihren BMI dennoch ermitteln möchten, können Sie diese allgemeine Formel zu Berechnung verwenden:</p>
                <p>Körpergewicht in Kilogramm geteilt durch Körpergröße in Metern zum Quadrat</p>
                <p><strong>Beispiel</strong><br />
                    Körpergewicht: 80 kg, Körpergröße: 1,79 Meter<br />
                    1,79 x 1,79 = 3,2<br />
                    80 / 3,2 = 25<br />
                    Der BMI liegt bei 25.</p>
                <p>Wichtig: Der BMI-Wert ist mit dieser einfachen Formel nur näherungsweise korrekt, da hier das Geschlecht und Alter nicht berücksichtigt werden, was auf die BMI-Bereiche für Unter-, Normal- und Übergewicht Einfluss hat.</p>
            </div>
        </noscript>

        <div class="calculator__disclaimer">
            Anmerkung: bei der Berechnung Ihres individuellen Body-Mass-Index kann es zu leichten Abweichungen aufgrund von Rundungsdifferenzen kommen.
        </div>

        <form class="calculator__form" novalidate>

            <div class="calculator__error">
                <h3 class="calculator__error-headline" tabindex="-1">
                    <i class="a-icon icon--warning-circle" aria-hidden="true"></i>Beachten Sie Folgendes:
                </h3>
                <ul class="js-calculator__error-list"></ul>
            </div>

            <fieldset class="calculator__fieldset">
                <legend class="sr-only">Geben Sie Ihr Alter, Körpergröße und Körpergewicht ein, um den BMI zu berechnen.</legend>

                <div class="calculator__form-row">
                    <div class="calculator__fieldname">
                        <label for="bmi_age" aria-label="Ihr Alter in Jahren">Alter</label>
                    </div>

                    <div class="calculator__field">
                        <input class="a-input input--number calculator__input" type="number" required="required" min="0" max="150" name="bmi_age" id="bmi_age" step="any" aria-describedBy="errormessage_bmi_age" value="" />
                        <span class="calculator__input-unit">Jahre</span>
                    </div>

                    <div class="calculator__errormessage" id="errormessage_bmi_age"></div>
                </div>

                <div class="calculator__form-row">
                    <div class="calculator__fieldname">
                        <label for="bmi_height" aria-label="Ihre Körpergröße in Zentimetern">Körpergröße</label>
                    </div>

                    <div class="calculator__field">
                        <input class="a-input input--number calculator__input" type="number" required="required" min="50" max="250" name="bmi_height" id="bmi_height" step="any" aria-describedBy="errormessage_bmi_height" value="" /><span class="calculator__input-unit">cm</span>
                    </div>

                    <div class="calculator__errormessage" id="errormessage_bmi_height"></div>
                </div>

                <div class="calculator__form-row">
                    <div class="calculator__fieldname">
                        <label for="bmi_weight" aria-label="Ihr Gewicht in Kilogramm">Körpergewicht</label>
                    </div>

                    <div class="calculator__field">
                        <input class="a-input input--number calculator__input" type="number" required="required" min="20" max="350" name="bmi_weight" id="bmi_weight" step="any" aria-describedBy="errormessage_bmi_weight" value="" /><span class="calculator__input-unit">kg</span>
                    </div>

                    <div class="calculator__errormessage" id="errormessage_bmi_weight"></div>
                </div>

                <input class="a-btn btn--primary calculator__btn--primary" type="submit" value="BMI berechnen" title="BMI berechnen" id="bmi_button">
            </fieldset>
        </form>

        <div class="calculator__result" id="bmi_result"></div>

    </div>

    <div class="calculator__target" id="id_1" hidden>

        <div class="o-teaser teaser--bannermodule cs--a">

            <h4 class="teaser__headline">
                Modul ID:1, für die leichteste Kategorie

            </h4>

        </div>

    </div>

    <div class="calculator__target" id="id_2" hidden>

        <div class="o-teaser teaser--bannermodule cs--b">

            <h4 class="teaser__headline">
                Modul ID:2, für die zweitleichteste Kategorie

            </h4>

        </div>

    </div>

    <div class="calculator__target" id="id_3" hidden>

        <div class="o-teaser teaser--bannermodule cs--c">

            <h4 class="teaser__headline">
                Modul ID:3, für die drittleichteste Kategorie

            </h4>

        </div>

    </div>

    <div class="calculator__target" id="id_4" hidden>

        <div class="o-teaser teaser--bannermodule cs--d">

            <h4 class="teaser__headline">
                Modul ID:4, für die Kategorie Übergewicht

            </h4>

        </div>

    </div>

    <div class="calculator__target" id="id_5">

        <div class="o-teaser teaser--bannermodule cs--d">

            <h4 class="teaser__headline">
                Modul ID:5, für die Kategorie starkes Übergewicht und initiale Darstellung.

            </h4>

        </div>

    </div>

</div>

<div class="o-content-footer">
    <div class="content-footer__info-container">
        <div class="a-plaintext plaintext--webcode">Webcode: a000876</div>

        <div class="m-timestamp "><span class="timestamp__label">Letzte Aktualisierung:</span> <time class="a-datetime ">06.03.2020</time>
        </div>

    </div>
    <div class="content-footer__cta-container">
        <form class="m-user-rating js-user-rating" action="/mock/page-rating-response.json" method="GET" data-success-message="Vielen Dank für Ihr Feedback.">
            <div class="user-rating__stars">
                <h3 class="user-rating__headline">Wie bewerten Sie diesen Artikel?</h3>
                <div class="a-rating-stars" role="group" aria-labelledby="rating-label">
                    <span class="sr-only" id="rating-label">Ihre Bewertung: </span>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="1">
                        <span class="sr-only">Ihre Bewertung: 1 Stern</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="2">
                        <span class="sr-only">Ihre Bewertung: 2 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="3">
                        <span class="sr-only">Ihre Bewertung: 3 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="4">
                        <span class="sr-only">Ihre Bewertung: 4 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="5">
                        <span class="sr-only">Ihre Bewertung: 5 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                </div>

            </div>

            <div class="user-rating__message" hidden>
                <label class="a-label user-rating__label" for="bm-rating-textarea">
                    Haben Sie noch weitere Anmerkungen zu Ihrer Bewertung?

                    <span class="sr-only">Maximale Zeichenzahl: 1000</span>
                </label>

                <div class="user-rating__textarea-wrapper">
                    <textarea class="a-textarea " id="bm-rating-textarea" name="comment" placeholder="Wir freuen uns über Ihre Anregungen..." autocomplete="off" maxlength="1000"></textarea>

                    <div class="a-counter " data-target="#bm-rating-textarea" hidden>
                        <span class="counter__current"></span>
                        /
                        <span class="counter__max"></span>
                    </div>

                </div>
                <input type="hidden" name="webcode" value="a000876">
                <label class="a-label user-rating__name-label" for="ratingname" aria-hidden="true">
                    Name

                </label>

                <input type="text" value="" class="a-input user-rating__name" id="ratingname" name="name" autocomplete="off" tabindex="-1" aria-hidden="true">

                <button class="a-btn btn--secondary js-rating-cancel" type="button">Abbrechen</button>

                <button class="a-btn btn--primary js-rating-submit" type="submit">Abschicken</button>

            </div>
            <div class="user-rating__success-text" hidden>
                <div class="a-richtext ">
                    <p>Vielen Dank für Ihr Feedback.<br><a href="#" class="bm-richtext-link">Link</a></p>
                </div>

            </div>
        </form>

        <div class="m-list list--socialmedia js-socialmedia">

            <ul class="a-list-basic list--social-icon">
                <li class="list__item ">
                    <a class="a-btn btn--print" href="javascript:window.print();" title="Drucken">
                        <i class="a-icon icon--print" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei Twitter teilen" target="_blank" data-service="twitter">
                        <i class="a-icon icon--twitter" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei Facebook teilen" target="_blank" data-service="facebook">
                        <i class="a-icon icon--facebook" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="whatsapp://send?text&#x3D;Krankenkasse%3A%20Starke%20Leistungen%20und%20Top-Service%20%7C%20BARMER%20https%3A%2F%2Fwww.barmer.de%2F" title="Bei Whatsapp teilen" data-service="whatsapp">
                        <i class="a-icon icon--whatsapp" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei XING teilen" target="_blank" data-service="xing">
                        <i class="a-icon icon--xing" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei LinkedIn teilen" target="_blank" data-service="linkedin">
                        <i class="a-icon icon--linkedin" aria-hidden="true"></i>
                    </a>

                </li>
            </ul>

        </div>

    </div>
</div>

<div class="o-teaser-collection teaser-collection--related-content">

    <h3 class="teaser-collection__headline teaser-collection__headline--h3">Entspannung, Abwechslung und Inspiration - mit unseren digitalen Angeboten</h3>

    <div class="teaser-collection__teaser-wrapper">
        <a href="http://tagesschau.de" class="o-teaser ">

            <div class="teaser__image">

                <picture class="a-picture ">
                    <source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-kind.jpg">
                    <source media="(min-width: 641px)" srcset="../../images/16x9/mann-mit-kind.jpg">
                    <img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
                </picture>

            </div>

            <div class="teaser__text">
                Karies: Nicht das einzige Problem für Kinderzähne
                &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </div>

        </a>

        <a href="http://tagesschau.de" class="o-teaser ">

            <div class="teaser__image">

                <picture class="a-picture ">
                    <source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
                    <source media="(min-width: 641px)" srcset="../../images/16x9/mann-mit-tablet.jpg">
                    <img src="../../images/16x9/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
                </picture>

            </div>

            <div class="teaser__text">
                Mit attraktiven Leistungen bei Krankheit und Pflege rundum abgesichert sein
                &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </div>

        </a>

        <a href="http://tagesschau.de" class="o-teaser ">

            <div class="teaser__image">

                <picture class="a-picture ">
                    <source media="(max-width: 640px)" srcset="../../images/1x1/barmer-app-yeah.jpg">
                    <source media="(min-width: 641px)" srcset="../../images/16x9/barmer-app-yeah.jpg">
                    <img src="../../images/16x9/barmer-app-yeah.jpg" alt="" loading="lazy">
                </picture>

            </div>

            <div class="teaser__text">
                Mit digitalen Services und vielen Extras kostengünstig krankenversichert sein
                &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </div>

        </a>

    </div>

</div>


        {{#if switches.isAnArticle }}
<article class="p-article {{viewtypes.specifier}}">
	{{render '@article-head' partials.articleHead merge=true}}
{{/if}}

  {{!-- main modules in article --}}

  <div class="o-calculator-package js-calculator-targeting" data-calculator-config="{&quot;bmi_1&quot;: [&quot;id_1&quot;],&quot;bmi_2&quot;: [&quot;id_2&quot;], &quot;bmi_3&quot;: [&quot;id_3&quot;], &quot;bmi_4&quot;: [&quot;id_4&quot;],&quot;bmi_5&quot;: [&quot;id_4&quot;], &quot;bmi_6&quot;: [&quot;id_4&quot;, &quot;id_5&quot;]}">

    <!--
      {
        "bmi_1": ["id_1"],
        "bmi_2": ["id_2"],
        "bmi_3": ["id_3"],
        "bmi_4": ["id_4"],
        "bmi_5": ["id_4"],
        "bmi_6": ["id_4", "id_1"],
      }
      -->


    {{render '@calculator--bmi-simple' merge=true }}

    <div class="calculator__target" id="id_1" hidden>
      {{render '@bannermodule--a-primary-btn' partials.module1 merge=true }}
    </div>

    <div class="calculator__target" id="id_2" hidden>
      {{render '@bannermodule--b-primary-btn' partials.module2 merge=true }}
    </div>

    <div class="calculator__target" id="id_3" hidden>
      {{render '@bannermodule--c-primary-btn' partials.module3 merge=true }}
    </div>

    <div class="calculator__target" id="id_4" hidden>
      {{render '@bannermodule--d-primary-btn' partials.module4 merge=true }}
    </div>

    <div class="calculator__target" id="id_5" >
      {{render '@bannermodule--d-primary-btn' partials.module5 merge=true }}
    </div>

  </div>


  {{!-- End main modules in article --}}

{{#if switches.isAnArticle }}
  {{render '@teaser-collections--certifications' merge=true }}

</article>
{{/if}}

{{render '@content-footer' merge=true}}
{{render '@teaser-collections--related-content' merge=true}}


        
            
            {
  "switches": {
    "hasContactFlyout": "true",
    "isAnArticle": false,
    "hasForm": true,
    "hasBanners": true
  },
  "content": {
    "alertText": "Die Sitzung wurde erfolgreich verlängert"
  },
  "partials": {
    "sessionMetadata": {
      "content": {
        "expiredDialogId": "bm-dialog-session-expired",
        "expiringDialogId": "bm-dialog-session-expiring"
      }
    },
    "expiring": {
      "switches": {
        "hidden": true,
        "secondaryButton": true
      },
      "content": {
        "id": "bm-dialog-session-expiring",
        "text": "In <span class=\"js-session-timer\">5</span> Minuten endet ihre Sitzung und Sie werden automatisch ausgeloggt."
      },
      "partials": {
        "primaryButton": {
          "content": {
            "label": "Login verlängern"
          }
        },
        "secondaryButton": {
          "content": {
            "label": "Logout"
          }
        }
      }
    },
    "expired": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-dialog-session-expired"
      }
    },
    "modalVideo": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-video"
      },
      "viewtypes": {
        "specifier": "modal--video"
      },
      "partials": {
        "consent": {
          "viewtypes": {
            "specifier": "consent--in-modal"
          }
        },
        "videoFigure": {
          "switches": {
            "hasHeadline": false,
            "hasFigcaption": false,
            "hasVideo": false
          }
        }
      }
    },
    "module1": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false,
            "hasTeaserText": false,
            "hasTeaserRichtext": false
          },
          "content": {
            "headline": "Modul ID:1, für die leichteste Kategorie"
          }
        }
      }
    },
    "module2": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false,
            "hasTeaserText": false,
            "hasTeaserRichtext": false
          },
          "content": {
            "headline": "Modul ID:2, für die zweitleichteste Kategorie"
          }
        }
      }
    },
    "module3": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false,
            "hasTeaserText": false,
            "hasTeaserRichtext": false
          },
          "content": {
            "headline": "Modul ID:3, für die drittleichteste Kategorie"
          }
        }
      }
    },
    "module4": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false,
            "hasTeaserText": false,
            "hasTeaserRichtext": false
          },
          "content": {
            "headline": "Modul ID:4, für die Kategorie Übergewicht"
          }
        }
      }
    },
    "module5": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false,
            "hasTeaserText": false,
            "hasTeaserRichtext": false
          },
          "content": {
            "headline": "Modul ID:5, für die Kategorie starkes Übergewicht und initiale Darstellung."
          }
        }
      }
    },
    "module6": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false,
            "hasTeaserText": false,
            "hasTeaserRichtext": false
          },
          "content": {
            "headline": "Modul ID:6, für die Kategorie „sehr starkes Übergewicht“"
          }
        }
      }
    }
  }
}

Handle: @bmi-rechner-simple--in-module-page
Variants (3): Default , In Module Page , Lead Magnets
Preview:
- With layout
- Component only
Filesystem Path: src/components/pages/calculators/bmi-rechner-simple.hbs
References (9): @article-head, @calculator--bmi-simple, @bannermodule--a-primary-btn, @bannermodule--b-primary-btn, @bannermodule--c-primary-btn, @bannermodule--d-primary-btn, @teaser-collections--certifications, @content-footer, @teaser-collections--related-content

No notes defined.