<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Character & Scene Architect · 100 Questions</title>
<style>
* { box-sizing: border-box; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
body { background: #080c1d; margin: 0; padding: 20px; color: #e2e8f0; }
.container { max-width: 1800px; margin: 0 auto; }
h1 { font-size: 2rem; margin: 0; color: #60a5fa; letter-spacing: -1px; }
.sub { color: #94a3b8; margin-bottom: 25px; border-left: 3px solid #3b82f6; padding-left: 15px; font-size: 0.9rem; }
.top-bar {
display: flex; justify-content: space-between; align-items: center;
background: #111827; padding: 15px 30px; border-radius: 16px;
margin-bottom: 25px; border: 1px solid #1e293b; position: sticky; top: 10px; z-index: 100;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}
.counter { color: #60a5fa; font-weight: 700; font-size: 1rem; }
.reset-btn {
background: #7f1d1d; border: none; color: #fecaca; padding: 8px 20px;
border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.2s;
}
.reset-btn:hover { background: #b91c1c; }
.main-panel { display: flex; gap: 25px; align-items: flex-start; }
.left-col {
flex: 2; height: 85vh; overflow-y: auto; padding-right: 10px;
scrollbar-width: thin; scrollbar-color: #334155 #0f172a;
}
.right-col {
flex: 1; position: sticky; top: 100px; background: #0f172a;
border-radius: 20px; border: 1px solid #334155; padding: 20px;
display: flex; flex-direction: column; max-height: 80vh;
}
.json-header { display: flex; justify-content: space-between; margin-bottom: 15px; align-items: center; }
.json-box {
background: #020617; border-radius: 12px; padding: 15px;
font-family: 'Fira Code', monospace; font-size: 0.8rem;
color: #38bdf8; overflow-y: auto; flex: 1; border: 1px solid #1e293b;
white-space: pre-wrap;
}
.copy-btn {
background: #3b82f6; border: none; color: white; padding: 6px 15px;
border-radius: 6px; cursor: pointer; font-weight: 600;
}
.q-card {
background: #111827; border-radius: 16px; padding: 20px; margin-bottom: 20px;
border: 1px solid #1e293b; transition: 0.2s;
}
.q-card:hover { border-color: #3b82f6; }
.q-title { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.q-num { background: #1e293b; color: #94a3b8; padding: 2px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 800; }
.q-text { font-size: 1.1rem; font-weight: 600; color: #f1f5f9; }
.pill-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.pill {
background: #1e293b; border: 1px solid #334155; color: #cbd5e1;
padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; cursor: pointer;
transition: 0.1s;
}
.pill:hover { background: #334155; border-color: #475569; }
.pill.selected { background: #3b82f6; border-color: #60a5fa; color: white; }
.input-group { display: flex; gap: 10px; align-items: center; }
.free-input {
flex: 1; background: #020617; border: 1px solid #334155; border-radius: 8px;
padding: 8px 12px; color: white; outline: none;
}
.free-input:focus { border-color: #3b82f6; }
.color-picker {
width: 40px; height: 40px; border: none; border-radius: 8px;
background: none; cursor: pointer; padding: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="top-bar">
<div>
<h1>Character & Scene Architect</h1>
<div id="answerCount" class="counter">0 / 100 Completed</div>
</div>
<button class="reset-btn" id="resetAll">Reset All Data</button>
</div>
<div class="main-panel">
<div class="left-col" id="questionArea"></div>
<div class="right-col">
<div class="json-header">
<span style="font-weight: bold; color: #94a3b8;">PROMPT_DATA.JSON</span>
<button class="copy-btn" id="copyJson">Copy JSON</button>
</div>
<div class="json-box" id="jsonOutput">{}</div>
</div>
</div>
</div>
<script>
const questionData = [
{ id: "s1", cat: "render", q: "Artistic Medium", choices: ["Digital Illustration", "Oil Painting", "Hyper-realistic 3D", "Watercolor", "Charcoal Sketch", "Vector Art", "Pixel Art", "Claymation", "Ukiyo-e", "Pencil Drawing", "Crayon", "Gouache", "Street Graffiti", "Blueprint", "Glitch Art", "Pop Art", "Impressionism", "Surrealism", "Concept Art", "Cinema 4D"] },
{ id: "s2", cat: "render", q: "Engine/Software", choices: ["Unreal Engine 5", "Octane Render", "Blender Cycles", "Redshift", "Midjourney V6", "Stable Diffusion XL", "DALL-E 3", "Arnold Render", "V-Ray", "ZBrush", "Unity HDRP", "Keyshot", "Houdini", "Photoshop", "Corel Painter", "Procreate", "Substance Painter", "Marmoset Toolbag", "Ray Traced", "Real-time"] },
{ id: "s3", cat: "render", q: "Overall Theme", choices: ["Cyberpunk", "High Fantasy", "Dark Noir", "Steampunk", "Solarpunk", "Post-Apocalyptic", "Space Opera", "Historical Realism", "Gothic Horror", "Urban Fantasy", "Mythological", "Viking Age", "Ethereal Dream", "Brutalist", "Retro-Futurism", "Ancient Egypt", "Feudal Japan", "Wild West", "Interdimensional", "Lovecraftian"] },
{ id: "s4", cat: "render", q: "Color Palette", isColor: true, choices: ["Neon Glow", "Monochrome", "Pastel Softness", "Earth Tones", "High Contrast", "Sepia Tone", "Vibrant Triadic", "Muted Desaturated", "Cyberpunk Blue/Pink", "Gold and Black", "Crimson and Ash", "Oceanic Teals", "Forest Greens", "Sunset Warmth", "Synthetix Night", "Iridescent", "Pearlescent", "Matte Black", "Primary Colors", "Analogous Warmth"] },
{ id: "s5", cat: "render", q: "Lighting Style", choices: ["Cinematic Rim Lighting", "Volumetric God Rays", "Soft Studio Box", "Harsh Sunlight", "Neon Strips", "Candlelight", "Bioluminescence", "Overhead Fluorescent", "Golden Hour", "Blue Hour", "Dramatic Chiaroscuro", "Backlit Silhouette", "Flash Photography", "Soft Moonlight", "Glowing Runes", "Firelight", "Underlight Horror", "Strobe Lights", "Diffuse Daylight", "Mood Lighting"] },
{ id: "s6", cat: "render", q: "Image Quality", choices: ["8k Resolution", "Masterpiece", "Highly Detailed", "Intricate Textures", "Photorealistic", "Sharp Focus", "Blurry Motion", "Vintage Film Grain", "Analog Photography", "Raw Photo", "Ultra High Definition", "Soft Focus", "Macro Detail", "Depth of Field", "Bokeh Background", "Raytraced Reflections", "Global Illumination", "Subsurface Scattering", "Anti-aliased", "Perfect Anatomy"] },
{ id: "s7", cat: "render", q: "Effect/Vibe", choices: ["Dreamy", "Energetic", "Melancholy", "Mysterious", "Aggressive", "Peaceful", "Nostalgic", "Terrifying", "Majestic", "Lonely", "Whimsical", "Eerie", "Cinematic", "Epic", "Lo-fi", "Industrial", "Organic", "Divine", "Cursed", "Radiant"] },
{ id: "s8", cat: "render", q: "Surface Material", choices: ["Polished Chrome", "Rusty Iron", "Weathered Leather", "Smooth Silk", "Translucent Glass", "Rough Stone", "Damasked Steel", "Organic Slime", "Glowing Plasma", "Woven Fabric", "Burnished Bronze", "Carved Wood", "Human Skin", "Scaly Chitin", "Velvet", "Liquid Mercury", "Carbon Fiber", "Matte Plastic", "Gold Leaf", "Cracked Ceramic"] },
{ id: "s9", cat: "render", q: "Visual Perspective", choices: ["Wide Angle", "Fish Eye", "Macro Close-up", "Bird's Eye View", "Worm's Eye View", "Dutch Angle", "Profile View", "Three-Quarter View", "Frontal View", "Back View", "Isometric", "Orthographic", "Telephoto Zoom", "First Person Point of View", "Drone Shot", "Low Angle Heroic", "High Angle Diminishing", "Panoptic", "Panoramic", "Selfie Perspective"] },
{ id: "s10", cat: "render", q: "Framing", choices: ["Full Body Shot", "Portrait", "Upper Body", "Extreme Close-up", "Landscape Orientation", "Vertical Composition", "Rule of Thirds", "Centered", "Symmetrical", "Asymmetrical", "Framed by Architecture", "Framed by Leaves", "Candid", "Action Pose", "Static Pose", "T-Pose", "Headshot", "Waist-up", "Knee-up", "Environment Focus"] },
{ id: "p11", cat: "person", q: "Biological Gender", choices: ["Male", "Female", "Androgynous", "Non-binary", "Genderless", "Intersex", "Masculine-leaning", "Feminine-leaning", "Fluid", "Xenogender", "Shapeshifter", "Artificial", "Holographic", "Dual-entity", "Trans-masculine", "Trans-feminine", "Agender", "Neuter", "Ambiguous", "Biological Construct"] },
{ id: "p12", cat: "person", q: "Apparent Age", choices: ["Newborn", "Child", "Teenager", "Young Adult", "Prime (30s)", "Middle-aged (40s)", "Mature (50s)", "Senior (60s+)", "Ancient (Centuries)", "Immortal", "Toddler", "Adolescent", "Elderly", "Venerable", "Timeless", "Infant", "Pre-teen", "Retiree", "Eternal Child", "Weathered Adult"] },
{ id: "p13", cat: "person", q: "Body Build", choices: ["Athletic", "Muscular/Bodybuilder", "Slender/Slim", "Curvy", "Plump/Full-figured", "Lean", "Willowy", "Ectomorphic", "Endomorphic", "Mesomorphic", "Towering Giant", "Short/Petite", "Brawny", "Lanky", "Wiry", "Stocky", "Athletic-Lean", "Slight", "Average", "Hulking"] },
{ id: "p14", cat: "person", q: "Skin Tone/Type", isColor: true, choices: ["Fair/Pale", "Olive", "Deep Bronze", "Ebony", "Alabaster", "Freckled", "Sun-kissed", "Weathered/Leathery", "Vitreous/Glassy", "Metallic", "Greenish-grey", "Pale Blue", "Obsidian Black", "Golden", "Tattooed", "Scarred", "Vitiligo Pattern", "Translucent", "Ashen", "Ruddy"] },
{ id: "p15", cat: "person", q: "Species/Origin", choices: ["Human", "Elf", "Cyborg", "Android", "Orc", "Dwarf", "Alien (Grey)", "Vampire", "Werewolf", "Demon", "Angel", "Fairy/Sprite", "Tiefling", "Dragonborn", "Anthropomorphic Animal", "Ghost/Wraith", "Construct/Golem", "Elemental", "Mutant", "Ancient Deity"] },
{ id: "p16", cat: "person", q: "Ethnicity/Heritage", choices: ["Northern European", "East Asian", "South Asian", "Sub-Saharan African", "Mediterranean", "Middle Eastern", "Native American", "Polynesian", "Latin American", "Slavic", "Nordic", "Celtic", "Central Asian", "Indigenous Australian", "Interstellar Hybrid", "Atlantean", "Lunar Colony", "Underground Dweller", "Nomadic Steppe", "Highland Tribal"] },
{ id: "p17", cat: "person", q: "Facial Shape", choices: ["Oval", "Square", "Heart-shaped", "Round", "Diamond", "Long/Rectangular", "Chiseled", "Soft/Rounded", "Gaunt/Sunken", "Pointed", "Wide-jawed", "High Cheekbones", "Sharp Features", "Flat Face", "Prominent Brow", "Asymmetric", "Triangular", "Inverted Triangle", "Plump", "Bony"] },
{ id: "p18", cat: "person", q: "Eye Color", isColor: true, choices: ["Sapphire Blue", "Emerald Green", "Deep Brown", "Amber/Gold", "Hazel", "Violet/Purple", "Glowing Red", "Silver/Grey", "Pure White", "Void Black", "Heterochromia (Dual)", "Neon Cyan", "Crimson", "Yellow Slit (Cat-eye)", "Blind/Clouded", "Icy Blue", "Turquoise", "Pink", "Gold-flecked", "Prismatic"] },
{ id: "p19", cat: "person", q: "Eye Shape", choices: ["Almond", "Hooded", "Monolid", "Round/Doe-eyed", "Deep-set", "Prominent/Large", "Downturned", "Upturned", "Narrow/Piercing", "Slanted", "Wide-set", "Closed/Squinting", "Sharp/Feline", "Droopy", "Sunken", "Large Pupil", "Small Pupil", "Glow-iris", "Cybernetic", "Double-lidded"] },
{ id: "p20", cat: "person", q: "Eyebrow Style", choices: ["Thick/Bushy", "Thin/Arched", "Straight/Flat", "Plucked/Sharp", "High Arched", "Scarred/Split", "Bleached/Invisible", "Naturally Full", "Angular", "Feathery", "Braided", "Jeweled", "Groomed", "Shaved", "Tapered", "Wild", "Monobrow", "Painted", "Cybernetic strip", "Short/Pointed"] },
{ id: "p21", cat: "person", q: "Hair Color", isColor: true, choices: ["Jet Black", "Platinum Blonde", "Strawberry Blonde", "Fiery Red", "Chestnut Brown", "Silver/Grey", "Snow White", "Neon Green", "Midnight Blue", "Pastel Pink", "Lilac", "Golden Blonde", "Dark Chocolate", "Caramel Highlights", "Ombre Gradient", "Rainbow", "Salt and Pepper", "Bald/Shaved", "Cooper", "Turquoise"] },
{ id: "p22", cat: "person", q: "Hair Style", choices: ["Long and Flowing", "Short Pixie Cut", "Buzz Cut", "Mohawk", "Braided Cornrows", "Top Knot/Bun", "Bob Cut", "Undercut", "Messy/Bedhead", "Slicked Back", "Ponytail", "Pigtails", "Afro", "Shoulder Length", "Wavy/Beach Waves", "Curly/Coiled", "Straight/Blunt", "Dreadlocks", "Mullet", "Side-parted"] },
{ id: "p23", cat: "person", q: "Facial Hair", choices: ["Clean Shaven", "Stubble (5 o'clock shadow)", "Full Bushy Beard", "Van Dyke", "Goatee", "Moustache (Handlebar)", "Sideburns", "Chin Strap", "Imperial Beard", "Braided Beard", "Short Boxed Beard", "Soul Patch", "Mutton Chops", "Walrus Moustache", "Anchor Beard", "Tapered Beard", "Pointed Beard", "Stitched Facial Hair", "Groomed Designer Beard", "Wild/Unkempt"] },
{ id: "p24", cat: "person", q: "Nose Shape", choices: ["Aquiline/Hooked", "Button/Small", "Straight/Greek", "Snub", "Bulbous", "Roman", "Fleshy", "Narrow/Thin", "Wide/Flat", "Turned up", "Scarred/Broken", "Nostril-focused", "Long", "Pointed", "Asymmetric", "Cybernetic replacement", "Jeweled", "Bridged", "Pierced", "Hawk-like"] },
{ id: "p25", cat: "person", q: "Lip Shape/Mouth", choices: ["Full/Pouty", "Thin/Strict", "Cupid's Bow", "Wide Smirk", "Down-turned", "Round/Doll-like", "Scared/Stitched", "Painted/Lipstick", "Chapped", "Glossy", "Protruding Lower Lip", "Perfectly Symmetrical", "Uneven", "Thin Upper Lip", "Muffled", "Gapped Teeth", "Fanged", "Gold-toothed", "Cybernetic Jaw", "Narrow"] },
{ id: "p26", cat: "person", q: "Ear Shape", choices: ["Human Standard", "Pointed Elf Ears", "Large/Dumbo", "Small/Dainty", "Attached Lobes", "Pierced/Gauged", "Tattered/Notched", "Hidden by Hair", "Animal-like (Feline)", "Animal-like (Canine)", "Long/Droopy", "Cybernetic Ear", "Crystalline", "Bat-like", "Scaled", "Tufted", "Feathered", "Fin-like", "Protruding", "Symmetrical"] },
{ id: "p27", cat: "person", q: "Facial Expression", choices: ["Neutral/Stoic", "Evil Smirk", "Kind/Gentle Smile", "Raging/Screaming", "Melancholy/Sad", "Winking", "Intense Stare", "Confused", "Terrified", "Bored/Apathetic", "Arrogant/Disdain", "Playful", "Determined", "Drunk/Dazed", "Sleeping/Peaceful", "Ecstatic", "Crying", "Gritting Teeth", "Panting", "Surprised"] },
{ id: "p28", cat: "person", q: "Makeup Style", choices: ["Natural/Minimal", "Heavy Goth/Eyeliner", "Warrior Warpaint", "Geisha Style", "Cyberpunk Neon Tattoos", "Drag Queen Glamour", "Clown/Mime", "SFX Bruising", "Gold Leaf Accents", "Glitter/Sparkle", "Smoky Eye", "Winged Liner", "Face Gems", "Holographic", "Abstract Lines", "Blood Splatter", "Sugar Skull", "Tribal Markings", "Corporate Minimal", "Elegant Evening"] },
{ id: "p29", cat: "person", q: "Body Modification", choices: ["Full Sleeve Tattoos", "Neck Tattoos", "Facial Piercings", "Nose Ring", "Tongue Piercing", "Ear Gauges", "Cybernetic Arm", "Mechanical Leg", "Glowing Implants", "Branded Skin", "Scarification", "Dermal Studs", "Magnetic Fingertips", "Neural Link Port", "Bionic Eye", "Subdermal Horns", "Split Tongue", "Metal Plating", "Bio-luminescent Veins", "Clockwork Heart"] },
{ id: "p30", cat: "person", q: "Hand/Finger Type", choices: ["Slender/Elegant", "Rough/Calloused", "Manicured Nails", "Long Talons", "Webbed Fingers", "Mechanical/Robotic", "Gloves worn", "Missing Fingers", "Jeweled Rings", "Tattooed Knuckles", "Stained (Ink/Oil)", "Sharp Nails", "Clawed", "Extra Fingers", "Transparent", "Scaled", "Hairy", "Stubby", "Graceful", "Skeletal"] },
{ id: "c31", cat: "costume", q: "Clothing Layer 1 (Base)", choices: ["Tight Spandex", "Linen Tunic", "Silk Undershirt", "Mesh Top", "Cotton Tee", "Leather Bodysuit", "Thermal Layer", "Bare Chest", "Corset", "Ripped Tank Top", "Holographic Skin", "Velvet Bodice", "Chainmail Shirt", "Paper-thin Wrap", "Latex Suit", "Kevlar Vest", "Bandages", "Fur Loincloth", "Satin Slip", "Denim Shirt"] },
{ id: "c32", cat: "costume", q: "Clothing Layer 2 (Outer)", choices: ["Trench Coat", "Leather Jacket", "Heavy Parka", "Kimono", "Hoodie", "Tailored Suit Jacket", "Denim Vest", "Poncho", "Bolero", "Cape", "Cloak", "Bomber Jacket", "Tactical Plate Carrier", "Robes", "Cardigan", "Windbreaker", "Peacoat", "Duster", "Lab Coat", "Plate Armor"] },
{ id: "c33", cat: "costume", q: "Pants/Bottoms", choices: ["Skinny Jeans", "Cargo Pants", "Leather Trousers", "Hakama", "Skirt (Mini)", "Skirt (Maxi)", "Kilts", "Leggings", "Shorts", "Dress Slacks", "Harem Pants", "Breeches", "Loincloth", "Armor Greaves", "Flight Suit", "Joggers", "Bell Bottoms", "Chaps", "Tutu", "Combat Pants"] },
{ id: "c34", cat: "costume", q: "Footwear", choices: ["Combat Boots", "Stiletto Heels", "Sneakers", "Thigh-high Boots", "Sandals", "Barefoot", "Heavy Sabatons", "Loafers", "Platform Boots", "Moccasins", "Flip Flops", "Geta", "Work Boots", "Ballet Flats", "Cybernetic Feet", "Cowboy Boots", "Winged Sandals", "Flippers", "Clogs", "Slippers"] },
{ id: "c35", cat: "costume", q: "Headwear", choices: ["Hood Up", "Wide-brimmed Hat", "Baseball Cap", "Crown/Tiara", "Helmet (Full Face)", "Helmet (Open)", "Beanie", "Beret", "Turban", "Veil", "Goggles on Forehead", "Headband", "Horns", "Circlet", "Cowboy Hat", "Top Hat", "Ushanka", "Fedora", "Space Helmet", "Witch Hat"] },
{ id: "c36", cat: "costume", q: "Neckwear", choices: ["Choker", "Silk Scarf", "Necktie", "Bowtie", "Amulet", "Dog Tags", "Cravat", "Feather Boa", "Heavy Gold Chain", "Ruff (Collar)", "Turtle Neck", "Fur Collar", "Jeweled Necklace", "Prayer Beads", "Gas Mask Hose", "Cape Clasp", "Pendant", "Leather Collar", "Glowing Tech Ring", "Rosary"] },
{ id: "c37", cat: "costume", q: "Handwear", choices: ["Leather Gloves", "Fingerless Gloves", "Gauntlets (Metal)", "Silk Gloves", "Latex/Medical", "Boxing Gloves", "Power Fists", "Mittens", "Wraps/Bandages", "Driving Gloves", "Lace Gloves", "Clawed Gauntlets", "Tattooed Hands", "Nail Claws", "Glowing Palms", "Brass Knuckles", "Ring Clusters", "Arm Guards", "Bracers", "Cuffs"] },
{ id: "c38", cat: "costume", q: "Belts/Utility", choices: ["Utility Belt", "Leather Waistband", "Sash", "Sword Belt", "Holster", "Chain Belt", "Bullet Belt", "Obi", "Corset Belt", "Rope Tie", "Tool Belt", "Bandoiler", "Pouches", "Glowing Battery Pack", "Decorative Buckle", "Double Belts", "Spiked Belt", "Woven Belt", "Suspenders", "Cummerbund"] },
{ id: "c39", cat: "costume", q: "Fabric Pattern", choices: ["Solid Color", "Camouflage", "Pinstripe", "Floral", "Animal Print (Leopard)", "Geometric", "Plaid/Tartan", "Polka Dot", "Paisley", "Circuit Board", "Damask", "Grid/Honeycomb", "Splatter", "Gradient", "Striped", "Starry/Galaxy", "Argyle", "Checkerboard", "Dragon Scales", "Toile"] },
{ id: "c40", cat: "costume", q: "Clothing Condition", choices: ["Pristine/New", "Worn-in", "Tattered/Ripped", "Mud-stained", "Blood-soaked", "Greasy/Dirty", "Burned/Singed", "Polished/Shiny", "Damp/Wet", "Starch-crisp", "Dusty", "Faded", "Moth-eaten", "Patched", "Reinforced", "Heavily Modified", "Embroidered", "Ancient", "Cyber-enhanced", "Formal"] },
];
const categoryPools = ["character", "environment", "photography", "equipment"];
const subTopics = [
"Primary Weapon", "Sidearm", "Magic Item", "Shield Style", "Backpack", "Mount/Vehicle", "Pet Companion",
"Terrain Type", "Architecture", "Sky Condition", "Weather Effect", "Time of Day", "Vegetation", "Water Body",
"Building Material", "Indoor/Outdoor", "Furniture Style", "Technology Level", "Magic Element", "Gravity Level",
"Camera Lens", "Focus Depth", "Motion Blur", "Film Stock", "Color Grading", "Exposure Level", "Shadow Density",
"VFX Particle", "Aura Color", "Symbol/Icon", "Social Class", "Personality Trait", "Hobby/Skill", "Origin Story",
"Language/Script", "Musical Instrument", "Food/Drink", "Tool/Device", "Jewelry Material", "Cape Length",
"Wing Type", "Tail Style", "Cyber-deck", "Power Source", "Ammunition Type", "Medication/Potion", "Map/Document",
"Light Source", "Shadow Shape", "Reflections", "Ambient Sound", "Smell/Scent", "Temperature", "Air Quality",
"Crowd Density", "Historical Era", "Planet Name", "Faction Symbol", "Rank/Title", "Character Goal"
];
for(let i=0; i<60; i++) {
const topic = subTopics[i];
questionData.push({
id: `gen_${i}`,
cat: categoryPools[i % categoryPools.length],
q: topic,
isColor: topic.toLowerCase().includes("color"),
choices: [
`Option 1 for ${topic}`, `Option 2 for ${topic}`, `Option 3 for ${topic}`, `Option 4 for ${topic}`,
`Common ${topic}`, `Rare ${topic}`, `Ancient ${topic}`, `Futuristic ${topic}`,
`Dark ${topic}`, `Bright ${topic}`, `Metallic ${topic}`, `Organic ${topic}`,
`Broken ${topic}`, `Fancy ${topic}`, `Minimalist ${topic}`, `Intricate ${topic}`,
`Magical ${topic}`, `Scientific ${topic}`, `Military ${topic}`, `Cursed ${topic}`
]
});
}
const answers = new Map();
function renderQuestions() {
const container = document.getElementById('questionArea');
container.innerHTML = questionData.map((item, idx) => `
<div class="q-card" id="card_${item.id}">
<div class="q-title">
<span class="q-num">${idx + 1}</span>
<span class="q-text">${item.q}</span>
</div>
<div class="pill-grid">
${item.choices.map(choice => `
<div class="pill ${answers.get(item.id) === choice ? 'selected' : ''}"
onclick="setAnswer('${item.id}', '${choice}')">
${choice}
</div>
`).join('')}
</div>
<div class="input-group">
<input type="text" class="free-input" placeholder="Custom text..."
value="${answers.has(item.id) ? answers.get(item.id) : ''}"
oninput="setAnswer('${item.id}', this.value)">
${item.isColor ? `<input type="color" class="color-picker" oninput="setAnswer('${item.id}', this.value)">` : ''}
</div>
</div>
`).join('');
}
window.setAnswer = (id, val) => {
answers.set(id, val);
updateUI();
};
function updateUI() {
questionData.forEach(item => {
const card = document.getElementById(`card_${item.id}`);
if(!card) return;
const pills = card.querySelectorAll('.pill');
const currentVal = answers.get(item.id);
pills.forEach(p => {
if(p.innerText === currentVal) p.classList.add('selected');
else p.classList.remove('selected');
});
const input = card.querySelector('.free-input');
if(document.activeElement !== input) input.value = currentVal || '';
});
const count = Array.from(answers.values()).filter(v => v.trim() !== "").length;
document.getElementById('answerCount').innerText = `${count} / 100 Completed`;
const output = {
metadata: { generated_at: new Date().toISOString(), total_fields: count },
render_settings: {},
character_profile: {},
costume_details: {},
environment_and_technical: {}
};
questionData.forEach(item => {
const val = answers.get(item.id) || "";
if(item.cat === "render") output.render_settings[item.q] = val;
else if(item.cat === "person") output.character_profile[item.q] = val;
else if(item.cat === "costume") output.costume_details[item.q] = val;
else output.environment_and_technical[item.q] = val;
});
document.getElementById('jsonOutput').innerText = JSON.stringify(output, null, 2);
}
document.getElementById('copyJson').addEventListener('click', () => {
const text = document.getElementById('jsonOutput').innerText;
navigator.clipboard.writeText(text).then(() => alert("Copied to clipboard!"));
});
document.getElementById('resetAll').addEventListener('click', () => {
if(confirm("Clear all data?")) {
answers.clear();
renderQuestions();
updateUI();
}
});
renderQuestions();
updateUI();
</script>
</body>
</html>
