Wikilah admin at 06:35, 31 March 2026

2026-03-31T06:35:04Z

← Older revision		Revision as of 14:35, 31 March 2026
Line 61:		Line 61:
	cursor: pointer;		cursor: pointer;
	text-align: left;		text-align: left;
	/* Buttons don't inherit font in Safari/iOS — must be explicit */		/* Buttons don't inherit font or color in Safari/iOS — must be explicit */
	font: inherit;		font: inherit;
			color: inherit;
	line-height: 1.5;		line-height: 1.5;
	transition:		transition:
Line 85:		Line 86:
	border: 1px solid var(--wix-border);		border: 1px solid var(--wix-border);
	border-radius: 50%;		border-radius: 50%;
	font-size: 0.~~8em~~;		font-size: 0.85em;
	font-weight: 700;		font-weight: 700;
	color: var(--wix-text-muted);		color: var(--wix-text-muted);
Line 139:		Line 140:

	.wix-results-title {		.wix-results-title {
	font-size: ~~1.15em~~;		font-size: 1em;
	font-weight: 700;		font-weight: 700;
	margin-bottom: 0.35rem;		margin-bottom: 0.35rem;

Wikilah admin at 06:24, 31 March 2026

2026-03-31T06:24:38Z

← Older revision		Revision as of 14:24, 31 March 2026
Line 52:		Line 52:
	.wix-option {		.wix-option {
	display: flex;		display: flex;
	align-items: ~~flex-start~~;		align-items: center;
	gap: 0.75rem;		gap: 0.75rem;
			width: 100%;
	padding: 0.75rem 1rem;		padding: 0.75rem 1rem;
	border: 1px solid var(--wix-border);		border: 1px solid var(--wix-border);
Line 60:		Line 61:
	cursor: pointer;		cursor: pointer;
	text-align: left;		text-align: left;
			/* Buttons don't inherit font in Safari/iOS — must be explicit */
			font: inherit;
	line-height: 1.5;		line-height: 1.5;
	transition:		transition:
Line 77:		Line 80:
	width: 1.6rem;		width: 1.6rem;
	height: 1.6rem;		height: 1.6rem;
	display: ~~inline-~~flex;		display: flex;
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
Line 163:		Line 166:
	padding: 0.65rem 0.75rem;		padding: 0.65rem 0.75rem;
	gap: 0.5rem;		gap: 0.5rem;
			width: 100%;
	}		}

Wikilah admin: Created page with "/* ================================================================ WIX-QUIZ.CSS — Wiki Interactive Experience: Quiz Engine Styles ================================================================ Loaded via ResourceLoader alongside wix-quiz.js. Depends on design tokens defined in wix-core.css. Covers: - Question card header (topic badge + number badge) - Question text - Option buttons (default, hover, selected, correct, wrong) - Results scre..."

2026-03-31T05:49:02Z

Created page with "/* ================================================================ WIX-QUIZ.CSS — Wiki Interactive Experience: Quiz Engine Styles ================================================================ Loaded via ResourceLoader alongside wix-quiz.js. Depends on design tokens defined in wix-core.css. Covers: - Question card header (topic badge + number badge) - Question text - Option buttons (default, hover, selected, correct, wrong) - Results scre..."

New page

/* ================================================================
WIX-QUIZ.CSS — Wiki Interactive Experience: Quiz Engine Styles
================================================================
Loaded via ResourceLoader alongside wix-quiz.js.
Depends on design tokens defined in wix-core.css.

Covers:
- Question card header (topic badge + number badge)
- Question text
- Option buttons (default, hover, selected, correct, wrong)
- Results screen layout
================================================================ */

/* ── 1. Quiz Header ──────────────────────────────────────────────
Row above the question: topic badge on the left,
question number badge on the right.
──────────────────────────────────────────────────────────────── */

.wix-quiz-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
gap: 0.5rem;
}

/* ── 2. Question Text ────────────────────────────────────────────
The question itself. No font-size override — inherits the skin.
font-weight is the only typographic property set here.
──────────────────────────────────────────────────────────────── */

.wix-question {
font-weight: 600;
margin-bottom: 1.25rem;
line-height: 1.5;
}

/* ── 3. Options List ─────────────────────────────────────────────
Vertical stack of clickable option buttons.
──────────────────────────────────────────────────────────────── */

.wix-options {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 0.5rem;
}

.wix-option {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: 1px solid var(--wix-border);
border-radius: var(--wix-radius);
background: var(--wix-bg);
cursor: pointer;
text-align: left;
line-height: 1.5;
transition:
border-color var(--wix-transition),
background var(--wix-transition);
-webkit-tap-highlight-color: transparent;
}

.wix-option:hover:not([disabled]) {
border-color: var(--wix-accent);
background: var(--wix-accent-light);
}

/* Letter label (A / B / C / D) */
.wix-option-letter {
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--wix-border);
border-radius: 50%;
font-size: 0.8em;
font-weight: 700;
color: var(--wix-text-muted);
transition:
border-color var(--wix-transition),
background var(--wix-transition),
color var(--wix-transition);
}

.wix-option-text {
flex: 1;
}

/* ── 4. Option States (after answer) ─────────────────────────────
Applied by JS once the user has selected an option.
All options are disabled after selection.
──────────────────────────────────────────────────────────────── */

.wix-option[disabled] {
cursor: default;
}

/* The correct answer — always highlighted green */
.wix-option--correct {
border-color: var(--wix-correct-border);
background: var(--wix-correct-bg);
}

.wix-option--correct .wix-option-letter {
border-color: var(--wix-correct);
background: var(--wix-correct);
color: #fff;
}

/* The option the user chose, if it was wrong */
.wix-option--wrong {
border-color: var(--wix-wrong-border);
background: var(--wix-wrong-bg);
}

.wix-option--wrong .wix-option-letter {
border-color: var(--wix-wrong);
background: var(--wix-wrong);
color: #fff;
}

/* ── 5. Results Screen ───────────────────────────────────────────
Reuses .wix-results, .wix-score-ring, .wix-review-list
from wix-core.css. Only quiz-specific overrides here.
──────────────────────────────────────────────────────────────── */

.wix-results-title {
font-size: 1.15em;
font-weight: 700;
margin-bottom: 0.35rem;
}

/* Color the score percentage based on performance */
.wix-score-pct--high {
color: var(--wix-correct);
}

.wix-score-pct--mid {
color: var(--wix-accent);
}

.wix-score-pct--low {
color: var(--wix-wrong);
}

/* ── 6. Mobile adjustments ───────────────────────────────────────
Tighten spacing on narrow screens.
──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
.wix-option {
padding: 0.65rem 0.75rem;
gap: 0.5rem;
}

.wix-question {
margin-bottom: 1rem;
}
}

MediaWiki:Gadget-wix-quiz.css - Revision history

Wikilah admin at 06:35, 31 March 2026

Wikilah admin at 06:24, 31 March 2026