Original fictional arts-room CSV and its five-field dictionary
HTML for this example
Select the code and use your copy shortcut. Changes in this preview are temporary.
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Arts-room inventory field reference</title><style>*{box-sizing:border-box}body{margin:0;background:#fbfaf5;color:#24333b;font:17px/1.6 system-ui}main{max-width:880px;margin:auto;padding:28px 24px}h1{font-size:32px;line-height:1.2}h2{font-size:24px}p{max-width:70ch}select{font:inherit;max-width:100%;padding:10px;border:1px solid #566c77;background:white}label{display:block;font-weight:600}dl{display:grid;grid-template-columns:150px 1fr;gap:9px 18px}dt{font-weight:650}dd{margin:0;overflow-wrap:anywhere}.values{border-top:2px solid #385766;padding-top:10px}.value{padding:12px 0;border-bottom:1px solid #c9cfd1}.value strong{display:inline-block;width:110px}.context{border-left:4px solid #385766;padding-left:16px}code{overflow-wrap:anywhere}@media(max-width:520px){main{padding:22px 18px}h1{font-size:28px}dl{display:block}dt{margin-top:12px}.value strong{display:block;width:auto}}</style><main><p>ORIGINAL FICTIONAL DATASET · v1 · October 31, 2026</p><h1>Read the field before interpreting the value</h1><p class="context">Arts-room inventory: one row per room in this snapshot. Three records, five fields. Actual maintainer: not supplied.</p><label for="field">Choose the source column</label><select id="field"><option value="room_code">room_code</option><option value="chairs_count" selected>chairs_count</option><option value="floor_area_sq_ft">floor_area_sq_ft</option><option value="projector">projector</option><option value="last_checked">last_checked</option></select><section aria-live="polite"><h2 id="label"></h2><p><code id="key"></code></p><div class="values"><h2>Values in the matching source</h2><p class="value"><strong>MAPLE</strong><span id="value-0"></span></p><p class="value"><strong>ELM</strong><span id="value-1"></span></p><p class="value"><strong>BIRCH</strong><span id="value-2"></span></p></div><dl><dt>Type</dt><dd id="type"></dd><dt>Unit</dt><dd id="unit"></dd><dt>Definition</dt><dd id="definition"></dd><dt>Allowed values</dt><dd id="allowed_values"></dd><dt>Missing value</dt><dd id="missing_meaning"></dd></dl></section><p>The view reads prepared source values. It does not edit, validate, save or send a dataset. No room occupancy or inspection certification is implied.</p><p>Maintain the CSV and dictionary together. If a field changes, update the definitions for the version you send.</p></main><script>const fields=[{"field":"room_code","label":"Room code","type":"text","unit":"Not applicable","definition":"Stable room identifier in this snapshot.","allowed_values":"MAPLE | ELM | BIRCH in this example","missing_meaning":"Not allowed in this fixture","values":["MAPLE","ELM","BIRCH"]},{"field":"chairs_count","label":"Chairs counted","type":"integer","unit":"individual chairs","definition":"Movable chairs physically counted in the room at its last check; not bookings or permitted occupancy.","allowed_values":"Whole number 0 or greater; no maximum supplied","missing_meaning":"No count recorded","values":["24","0",""]},{"field":"floor_area_sq_ft","label":"Floor area","type":"number","unit":"square feet","definition":"Recorded floor area of the room.","allowed_values":"Number greater than 0 when supplied","missing_meaning":"No area recorded","values":["420","310",""]},{"field":"projector","label":"Projector recorded","type":"text category","unit":"Not applicable","definition":"Whether a projector was recorded as present at the last check.","allowed_values":"yes | no | unknown","missing_meaning":"Blank not used; unknown is an explicit category","values":["yes","no","unknown"]},{"field":"last_checked","label":"Last check date","type":"date text","unit":"calendar date","definition":"Date of the room inventory check; no time of day supplied.","allowed_values":"YYYY-MM-DD when supplied","missing_meaning":"No check date recorded","values":["2026-10-29","2026-10-30",""]}];const select=document.querySelector("#field");function render(){const f=fields.find(x=>x.field===select.value);for(const key of ["label","type","unit","definition","allowed_values","missing_meaning"])document.getElementById(key).textContent=f[key];document.querySelector("#key").textContent=f.field;f.values.forEach((v,i)=>document.getElementById("value-"+i).textContent=v===""?"Blank — "+f.missing_meaning.toLowerCase():v);}select.addEventListener("change",render);render();</script></html>