FactCheck

import ui/theme.qwe use theme_cssuse ui/fact_check.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view FactCheckDemo() =    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start">        <FactCheck id="fact-check-demo-crime" claim="Crime in this city has doubled since 2020." claimant="Dana Reyes"                   claimant_role="Mayor of Riverside" context="in a radio interview" claim_date="2026-10-21" rating="Mostly false"                   author="Ada Lovelace" published="2026-10-24" href="#fact-check-crime"                   sources={[{ label: "Riverside Police annual report, 2025", href: "#police-report" },                             { label: "State crime statistics, 2020–2025", href: "#state-stats" },                             { label: "Interview with the police commissioner, Oct. 23" }]}>            <p>Reported crime rose 14% from 2020 to 2025, not 100%. Property crime drove the rise; violent crime fell by a fifth.</p>        </FactCheck>        <FactCheck id="fact-check-demo-true" claim="Unemployment is at its lowest since 2001." claimant="Finance minister" rating="true">            The statistics office puts it at 4.1%, the lowest since the 3.9% of March 2001.        </FactCheck>        <FactCheck id="fact-check-demo-off" claim="The new bridge was built without a single steel beam from abroad." rating="Misleading"                   scale={["Correct", "Misleading", "False"]} heading="Verified"/>    </div>

// FactCheck: a fact-check's verdict: the claim as it was said, who said it, where// and when; the rating, large, in a colour from true (green) to false (red) and// placed on its scale; what the fact-checkers found; their sources; and a link to// the whole piece. It carries schema.org's ClaimReview, so search engines can show// the rating too.////   <FactCheck claim="Crime in the city has doubled since 2020." claimant="Mayor Dana Reyes"//              context="in a radio interview" claim_date="2026-10-21" rating="Mostly false"//              author="Ada Lovelace" published="2026-10-24" href="/fact-check/crime"//              sources={[{ label: "Police annual report, 2025", href: "https://..." }]}>//       Reported crime rose 14% from 2020 to 2025, not 100%; violent crime fell.//   </FactCheck>//// claim: what was said, quoted. claimant: who said it; claimant_role: a line about// them ("Mayor of Riverside"); context: where ("in a radio interview"); claim_date:// when, an ISO date. rating: the verdict, one of scale's words (in any case; it is// written as the scale has it), or a word off the scale ("Misleading", "Pants on fire"), which reads as false. scale: the// verdicts from best to worst (["True", "Mostly true", "Half true", "Mostly false",// "False"]). The children are what was found (a sentence or two). sources: maps of// { label, href? }, listed in a disclosure. href: the full fact-check; link: its text// ("Read the full fact check"). author: who checked it; published: when, an ISO date.// heading: the line over the claim ("Fact check"). locale: the month names' language.// id: the element's id.import ui/theme.qwe use ui_clslet fact_check_css = css`.ui-fck { --t: var(--ui-muted); display: grid; gap: 14px; max-width: 640px; margin: 0; padding: 20px; border: 1px solid var(--ui-border);  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }.ui-fck-t0 { --t: var(--ui-success); }.ui-fck-t1 { --t: color-mix(in srgb, var(--ui-success) 55%, var(--ui-warning)); }.ui-fck-t2 { --t: var(--ui-warning); }.ui-fck-t3 { --t: color-mix(in srgb, var(--ui-warning) 45%, var(--ui-danger)); }.ui-fck-t4 { --t: var(--ui-danger); }.ui-fck-kicker { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 800;  letter-spacing: .08em; text-transform: uppercase; }.ui-fck-kicker svg { width: 16px; height: 16px; color: var(--ui-accent); }.ui-fck-claim { display: grid; gap: 6px; margin: 0; }.ui-fck-claim blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--ui-strong); font-size: 19px; line-height: 1.4; font-weight: 600; }.ui-fck-claim figcaption { padding-left: 17px; color: var(--ui-muted); font-size: 13px; }.ui-fck-claim figcaption b { color: var(--ui-fg); font-weight: 650; }.ui-fck-verdict { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--t) 10%, var(--ui-surface)); }.ui-fck-said { margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.ui-fck-rating { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--t); font-size: 26px; line-height: 1.1; font-weight: 800; }.ui-fck-badge { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--t); color: var(--ui-bg); font-size: 18px; }.ui-fck-scale { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin: 0; padding: 0; list-style: none; }.ui-fck-scale li { display: grid; gap: 4px; min-width: 0; color: var(--ui-muted); font-size: 11px; line-height: 1.2; text-align: center; }.ui-fck-scale li::before { content: ""; height: 6px; border-radius: 3px; background: var(--ui-border); }.ui-fck-scale li.ui-fck-on { color: var(--ui-fg); font-weight: 700; }.ui-fck-scale li.ui-fck-on::before { height: 10px; margin-top: -2px; background: var(--t); }.ui-fck-found { display: grid; gap: 4px; }.ui-fck .ui-fck-found h3 { margin: 0; font-size: 14px; font-weight: 700; }.ui-fck-found > div > :first-child { margin-top: 0; }.ui-fck-found > div > :last-child { margin-bottom: 0; }.ui-fck-sources summary { color: var(--ui-fg); font-size: 14px; font-weight: 600; cursor: pointer; }.ui-fck-sources summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }.ui-fck-sources ul { margin: 8px 0 0; padding-left: 20px; color: var(--ui-muted); font-size: 14px; }.ui-fck-sources a { color: var(--ui-accent); }.ui-fck-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px;  border-top: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 13px; }.ui-fck-more { color: var(--ui-accent); font-size: 14px; font-weight: 650; text-decoration: none; }.ui-fck-more:hover { text-decoration: underline; }.ui-fck a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }`// An ISO date as "Oct 24, 2026".fn fact_check_when(d: str, locale: str) -> str = date.format(slice(d, 0, 10), { locale, pattern: "MMM D, YYYY" })view FactCheck(claim: str, rating: str, claimant: str? = null, claimant_role: str? = null, context: str? = null, claim_date: str? = null,               scale: list = ["True", "Mostly true", "Half true", "Mostly false", "False"], sources: list = [], href: str? = null,               link: str = "Read the full fact check", author: str? = null, published: str? = null, heading: str = "Fact check",               locale: str = "en-US", id: str? = null, class: str? = null, children = null) {    style global fact_check_css    let n = len(scale)    let at = index_of(scale | map((s) => lower(s)), lower(rating))    let place = at ?? n - 1    let said = at != null ? scale[at] : rating    let tone = n > 1 ? round(place * 4 / (n - 1)) : 2    let mark = tone <= 1 ? "✓" : (tone == 2 ? "~" : "✗")    <article class={ui_cls(["ui-fck", `ui-fck-t${tone}`, class])} id={id} aria-label={`${heading}: ${said}`}             itemscope itemtype="https://schema.org/ClaimReview">        <p.ui-fck-kicker>            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">                <circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5l3.5 3.5M5 7l1.5 1.5L9 5.5"/>            </svg>            {heading}        </p>        <figure.ui-fck-claim>            <blockquote itemprop="claimReviewed">“{claim}”</blockquote>            {(claimant != null || context != null || claim_date != null) && <figcaption itemprop="itemReviewed" itemscope itemtype="https://schema.org/Claim">                {claimant != null && ["— ", <b itemprop="author">{claimant}</b>]}                {claimant_role != null && `, ${claimant_role}`}                {context != null && `, ${context}`}                {claim_date != null && [", ", <time datetime={claim_date} itemprop="datePublished">{fact_check_when(claim_date, locale)}</time>]}            </figcaption>}        </figure>        <div.ui-fck-verdict itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">            <p.ui-fck-said>Our rating</p>            <p.ui-fck-rating><span.ui-fck-badge aria-hidden="true">{mark}</span><span itemprop="alternateName">{said}</span></p>            <meta itemprop="ratingValue" content={str(at != null ? n - at : 1)}/>            <meta itemprop="bestRating" content={str(n)}/>            <meta itemprop="worstRating" content="1"/>            <ol.ui-fck-scale aria-hidden="true">                {for [i, s] in enumerate(scale) => <li class={i == at ? "ui-fck-on" : null}>{s}</li>}            </ol>            <span.ui-sr>{at != null ? `${at + 1} of ${n} on a scale from ${scale[0]} to ${scale[n - 1]}.` : `Not on the scale from ${scale[0]} to ${scale[n - 1]}.`}</span>        </div>        {children != null && str(children) != "" && <div.ui-fck-found>            <h3>What we found</h3>            <div>{children}</div>        </div>}        {len(sources) > 0 && <details.ui-fck-sources>            <summary>Sources ({len(sources)})</summary>            <ul>{for s in sources => <li>{s.href != null ? <a href={s.href} rel="nofollow">{s.label}</a> : s.label}</li>}</ul>        </details>}        {(href != null || author != null || published != null) && <div.ui-fck-foot>            <span>                {author != null && ["Checked by ", <span itemprop="author">{author}</span>]}                {author != null && published != null && " · "}                {published != null && <time datetime={published} itemprop="datePublished">{fact_check_when(published, locale)}</time>}            </span>            {href != null && <a.ui-fck-more href={href} itemprop="url">{link} →</a>}        </div>}    </article>}