Jump to content

Widget:Solvency2 BalanceSheet: Difference between revisions

From Insurer Brain
Browse history interactively
Content deleted Content added
VisualWikitext
Created page with "<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Solvency II Balance Sheet</title> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> <style> :root { --bg: #0c1018; --surface: #141b27; --surface2: #1a2234; --border: #253044; --tex..."
 
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div id="insurerbrain-module-solvency2-bs">
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solvency II Balance Sheet</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
<style>
/* ── Reset & Container ──────────────────────────────────── */
:root {
#insurerbrain-module-solvency2-bs *,
--bg: #0c1018;
#insurerbrain-module-solvency2-bs *::before,
--surface: #141b27;
#insurerbrain-module-solvency2-bs *::after {
--surface2: #1a2234;
--border: #253044;
box-sizing: border-box;
--text: #e2e8f0;
margin: 0;
--text-dim: #8896ab;
padding: 0;
}
--text-muted: #5a6a80;
--accent-blue: #4a9eff;
--accent-cyan: #22d3ee;
--accent-emerald: #34d399;
--accent-amber: #fbbf24;
--accent-rose: #fb7185;
--accent-violet: #a78bfa;
--accent-orange: #fb923c;
/* Balance sheet colors */
--assets-color: #4a9eff;
--bel-color: #fb923c;
--rm-color: #fbbf24;
--scr-color: #fb7185;
--mcr-color: #e879a0;
--surplus-color: #34d399;
--own-funds-color: #22d3ee;
--tp-color: #f59e42;
}


#insurerbrain-module-solvency2-bs {
* { margin: 0; padding: 0; box-sizing: border-box; }
--ib-accent: #1a5276;
--ib-accent-light: #d4e6f1;
--ib-correct: #1e8449;
--ib-correct-bg: #d5f5e3;
--ib-correct-border: #82e0aa;
--ib-wrong: #922b21;
--ib-wrong-bg: #fadbd8;
--ib-wrong-border: #f1948a;
--ib-neutral-bg: #f8f9fa;
--ib-neutral-border: #c8ccd1;
--ib-text: #202122;
--ib-text-muted: #54595d;
--ib-radius: 4px;
--ib-transition: 0.25s ease;


max-width: 52rem;
body {
padding: 1.5rem 0;
background: var(--bg);
color: var(--text);
color: var(--ib-text);
}
font-family: 'IBM Plex Sans', sans-serif;
min-height: 100vh;
overflow-x: hidden;
}


/* ── Progress Bar ────────────────────────────────────────── */
/* Grain overlay */
#insurerbrain-module-solvency2-bs .ib-progress-wrap {
body::before {
content: '';
display: flex;
position: fixed;
align-items: center;
inset: 0;
gap: 0.75rem;
margin-bottom: 1.25rem;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
pointer-events: none;
z-index: 999;
}


#insurerbrain-module-solvency2-bs .ib-progress-label {
.container {
max-width: 1280px;
white-space: nowrap;
color: var(--ib-text-muted);
margin: 0 auto;
font-size: 0.875em;
padding: 40px 32px 60px;
min-width: 6.5rem;
}
}


#insurerbrain-module-solvency2-bs .ib-progress-track {
/* Header */
header {
flex: 1;
text-align: center;
height: 6px;
background: var(--ib-neutral-bg);
margin-bottom: 48px;
border: 1px solid var(--ib-neutral-border);
animation: fadeUp 0.8s ease-out;
border-radius: 3px;
}
overflow: hidden;
}


#insurerbrain-module-solvency2-bs .ib-progress-fill {
header .eyebrow {
height: 100%;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
width: 0%;
background: var(--ib-accent);
font-weight: 500;
letter-spacing: 3px;
border-radius: 3px;
transition: width 0.4s ease;
text-transform: uppercase;
}
color: var(--accent-cyan);
margin-bottom: 16px;
opacity: 0.8;
}


/* ── Question Card ───────────────────────────────────────── */
header h1 {
#insurerbrain-module-solvency2-bs .ib-card {
font-family: 'DM Serif Display', serif;
background: var(--ib-neutral-bg);
font-size: clamp(28px, 5vw, 48px);
border: 1px solid var(--ib-neutral-border);
font-weight: 400;
border-radius: var(--ib-radius);
line-height: 1.15;
letter-spacing: -0.5px;
padding: 1.5rem;
margin-bottom: 1rem;
background: linear-gradient(135deg, #e2e8f0 30%, var(--accent-cyan) 100%);
}
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
}


#insurerbrain-module-solvency2-bs .ib-q-header {
header p {
font-size: 15px;
display: flex;
align-items: baseline;
color: var(--text-dim);
max-width: 640px;
gap: 0.5rem;
margin: 0 auto;
margin-bottom: 1rem;
}
line-height: 1.65;
font-weight: 300;
}


#insurerbrain-module-solvency2-bs .ib-q-number {
/* Main layout */
display: inline-flex;
.main-grid {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 1fr 360px;
gap: 32px;
min-width: 1.75rem;
height: 1.75rem;
align-items: start;
background: var(--ib-accent);
animation: fadeUp 0.8s ease-out 0.15s both;
color: #fff;
}
border-radius: 50%;
font-size: 0.8em;
font-weight: 700;
flex-shrink: 0;
}


#insurerbrain-module-solvency2-bs .ib-q-topic {
@media (max-width: 960px) {
font-size: 0.8em;
.main-grid { grid-template-columns: 1fr; }
color: var(--ib-text-muted);
}
border: 1px solid var(--ib-neutral-border);
border-radius: 2px;
padding: 0.1rem 0.45rem;
margin-left: auto;
white-space: nowrap;
}


#insurerbrain-module-solvency2-bs .ib-q-text {
/* Balance sheet visual */
margin-bottom: 1.25rem;
.bs-visual {
line-height: 1.55;
background: var(--surface);
}
border: 1px solid var(--border);
border-radius: 16px;
padding: 36px;
position: relative;
overflow: hidden;
}


/* ── Options ─────────────────────────────────────────────── */
.bs-visual::before {
#insurerbrain-module-solvency2-bs .ib-options {
content: '';
position: absolute;
display: flex;
flex-direction: column;
top: -1px;
left: 40px;
gap: 0.5rem;
}
right: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
opacity: 0.4;
}


#insurerbrain-module-solvency2-bs .ib-option {
.bs-title-row {
display: flex;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 28px;
padding: 0.75rem 1rem;
}
border: 1px solid var(--ib-neutral-border);
border-radius: var(--ib-radius);
background: #fff;
cursor: pointer;
transition: border-color var(--ib-transition), background var(--ib-transition);
line-height: 1.45;
}


#insurerbrain-module-solvency2-bs .ib-option:hover:not(.ib-disabled) {
.bs-col-label {
border-color: var(--ib-accent);
font-family: 'IBM Plex Mono', monospace;
background: var(--ib-accent-light);
font-size: 11px;
}
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--text-muted);
}


#insurerbrain-module-solvency2-bs .ib-option.ib-selected:not(.ib-disabled) {
.bs-columns {
border-color: var(--ib-accent);
display: grid;
background: var(--ib-accent-light);
grid-template-columns: 1fr 32px 1fr;
}
gap: 0;
min-height: 520px;
}


#insurerbrain-module-solvency2-bs .ib-option.ib-disabled {
.bs-col {
display: flex;
cursor: default;
opacity: 0.85;
flex-direction: column;
}
gap: 3px;
}


#insurerbrain-module-solvency2-bs .ib-option.ib-correct-answer {
.bs-separator {
border-color: var(--ib-correct-border);
display: flex;
background: var(--ib-correct-bg);
align-items: center;
opacity: 1;
justify-content: center;
}
}


#insurerbrain-module-solvency2-bs .ib-option.ib-wrong-answer {
.bs-separator .line {
border-color: var(--ib-wrong-border);
width: 1px;
background: var(--ib-wrong-bg);
height: 100%;
opacity: 1;
background: var(--border);
}
opacity: 0.5;
}


#insurerbrain-module-solvency2-bs .ib-option-key {
/* Blocks */
display: inline-flex;
.bs-block {
border-radius: 10px;
align-items: center;
justify-content: center;
padding: 16px 18px;
position: relative;
min-width: 1.5rem;
cursor: pointer;
height: 1.5rem;
border: 1.5px solid var(--ib-neutral-border);
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
border-radius: 50%;
display: flex;
font-size: 0.8em;
flex-direction: column;
font-weight: 600;
justify-content: center;
flex-shrink: 0;
transition: border-color var(--ib-transition), background var(--ib-transition), color var(--ib-transition);
border: 1px solid transparent;
}
}


#insurerbrain-module-solvency2-bs .ib-option.ib-selected .ib-option-key {
.bs-block::before {
border-color: var(--ib-accent);
content: '';
background: var(--ib-accent);
position: absolute;
inset: 0;
color: #fff;
}
opacity: 0.08;
transition: opacity 0.3s ease;
}


#insurerbrain-module-solvency2-bs .ib-option.ib-correct-answer .ib-option-key {
.bs-block:hover {
border-color: var(--ib-correct);
transform: translateX(3px);
background: var(--ib-correct);
border-color: rgba(255,255,255,0.08);
color: #fff;
}
}


#insurerbrain-module-solvency2-bs .ib-option.ib-wrong-answer .ib-option-key {
.bs-block:hover::before { opacity: 0.14; }
border-color: var(--ib-wrong);
background: var(--ib-wrong);
color: #fff;
}


#insurerbrain-module-solvency2-bs .ib-option-text {
.bs-block.active {
padding-top: 0.1rem;
border-color: rgba(255,255,255,0.15);
}
box-shadow: 0 0 24px rgba(0,0,0,0.3);
transform: scale(1.02);
z-index: 2;
}


/* ── Feedback ────────────────────────────────────────────── */
.bs-block .label {
#insurerbrain-module-solvency2-bs .ib-feedback {
font-size: 13px;
font-weight: 600;
margin-top: 1rem;
letter-spacing: 0.2px;
padding: 0.85rem 1rem;
border-radius: var(--ib-radius);
margin-bottom: 3px;
border-left: 4px solid transparent;
position: relative;
line-height: 1.5;
}
display: none;
}


#insurerbrain-module-solvency2-bs .ib-feedback.ib-show {
.bs-block .sublabel {
font-size: 11px;
display: block;
opacity: 0.6;
animation: ibFadeIn 0.3s ease;
}
font-weight: 400;
position: relative;
}


#insurerbrain-module-solvency2-bs .ib-feedback.ib-fb-correct {
.bs-block .value {
background: var(--ib-correct-bg);
font-family: 'IBM Plex Mono', monospace;
border-left-color: var(--ib-correct);
font-size: 15px;
color: var(--ib-correct);
font-weight: 500;
}
margin-top: 6px;
position: relative;
}


#insurerbrain-module-solvency2-bs .ib-feedback.ib-fb-wrong {
/* Block specific colors */
background: var(--ib-wrong-bg);
.block-assets {
border-left-color: var(--ib-wrong);
background: rgba(74, 158, 255, 0.12);
border-color: rgba(74, 158, 255, 0.15);
color: var(--ib-wrong);
}
}
.block-assets::before { background: var(--assets-color); }
.block-assets .value { color: var(--assets-color); }


#insurerbrain-module-solvency2-bs .ib-feedback strong {
.block-bel {
display: block;
background: rgba(251, 146, 60, 0.1);
margin-bottom: 0.25rem;
}
}
.block-bel::before { background: var(--bel-color); }
.block-bel .value { color: var(--bel-color); }


#insurerbrain-module-solvency2-bs .ib-feedback .ib-explanation {
.block-rm {
color: var(--ib-text);
background: rgba(251, 191, 36, 0.1);
font-size: 0.92em;
}
}
.block-rm::before { background: var(--rm-color); }
.block-rm .value { color: var(--rm-color); }


/* ── Navigation ──────────────────────────────────────────── */
.block-scr {
#insurerbrain-module-solvency2-bs .ib-nav {
background: rgba(251, 113, 133, 0.1);
display: flex;
}
justify-content: flex-end;
.block-scr::before { background: var(--scr-color); }
gap: 0.5rem;
.block-scr .value { color: var(--scr-color); }
margin-top: 1rem;
}


#insurerbrain-module-solvency2-bs .ib-btn {
.block-mcr {
padding: 0.55rem 1.25rem;
background: rgba(167, 139, 250, 0.1);
border: 1px solid var(--ib-accent);
}
.block-mcr::before { background: var(--accent-violet); }
border-radius: var(--ib-radius);
.block-mcr .value { color: var(--accent-violet); }
background: var(--ib-accent);
color: #fff;
font-size: 0.9em;
font-weight: 600;
cursor: pointer;
transition: opacity var(--ib-transition);
}


#insurerbrain-module-solvency2-bs .ib-btn:hover {
.block-surplus {
opacity: 0.85;
background: rgba(52, 211, 153, 0.1);
}
}
.block-surplus::before { background: var(--surplus-color); }
.block-surplus .value { color: var(--surplus-color); }


#insurerbrain-module-solvency2-bs .ib-btn:disabled {
.block-tp {
opacity: 0.4;
background: rgba(245, 158, 66, 0.08);
cursor: default;
border-color: rgba(245, 158, 66, 0.12);
}
}


#insurerbrain-module-solvency2-bs .ib-btn-outline {
.block-of {
background: rgba(34, 211, 238, 0.08);
background: transparent;
border-color: rgba(34, 211, 238, 0.12);
color: var(--ib-accent);
}
}


/* ── Results Screen ──────────────────────────────────────── */
/* Bracket annotations */
#insurerbrain-module-solvency2-bs .ib-results {
.bracket-group {
position: absolute;
text-align: center;
padding: 2rem 1rem;
display: flex;
}
align-items: center;
pointer-events: none;
}


#insurerbrain-module-solvency2-bs .ib-score-ring {
/* Connector lines */
position: relative;
.connectors {
position: absolute;
width: 9rem;
inset: 0;
height: 9rem;
margin: 0 auto 1.5rem;
pointer-events: none;
}
}


#insurerbrain-module-solvency2-bs .ib-score-ring svg {
/* Side panel */
transform: rotate(-90deg);
.side-panel {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
gap: 20px;
}


#insurerbrain-module-solvency2-bs .ib-score-ring circle {
.info-card {
fill: none;
background: var(--surface);
stroke-width: 8;
border: 1px solid var(--border);
}
border-radius: 14px;
padding: 24px;
transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


#insurerbrain-module-solvency2-bs .ib-ring-bg {
.info-card .card-label {
stroke: var(--ib-neutral-border);
font-family: 'IBM Plex Mono', monospace;
}
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 14px;
}


#insurerbrain-module-solvency2-bs .ib-ring-fill {
.info-card h3 {
stroke: var(--ib-correct);
font-family: 'DM Serif Display', serif;
font-size: 22px;
stroke-linecap: round;
font-weight: 400;
stroke-dasharray: 264;
margin-bottom: 10px;
stroke-dashoffset: 264;
transition: stroke-dashoffset 1s ease;
line-height: 1.3;
}
transition: color 0.3s ease;
}


#insurerbrain-module-solvency2-bs .ib-score-label {
.info-card p {
font-size: 13.5px;
position: absolute;
line-height: 1.7;
inset: 0;
display: flex;
color: var(--text-dim);
font-weight: 300;
flex-direction: column;
align-items: center;
}
justify-content: center;
}


#insurerbrain-module-solvency2-bs .ib-score-pct {
.info-card .formula {
margin-top: 14px;
font-size: 2rem;
font-weight: 700;
background: rgba(34, 211, 238, 0.06);
color: var(--ib-text);
border: 1px solid rgba(34, 211, 238, 0.12);
}
border-radius: 8px;
padding: 12px 16px;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
color: var(--accent-cyan);
letter-spacing: 0.3px;
}


#insurerbrain-module-solvency2-bs .ib-score-sub {
/* Solvency ratio gauge */
font-size: 0.85em;
.gauge-card {
text-align: center;
color: var(--ib-text-muted);
}
padding: 28px 24px;
}


#insurerbrain-module-solvency2-bs .ib-results-msg {
.gauge-wrapper {
margin-bottom: 1.5rem;
position: relative;
color: var(--ib-text-muted);
width: 160px;
height: 90px;
line-height: 1.5;
}
margin: 0 auto 16px;
overflow: hidden;
}


#insurerbrain-module-solvency2-bs .ib-review-list {
.gauge-bg, .gauge-fill {
position: absolute;
text-align: left;
width: 160px;
margin-top: 1.5rem;
}
height: 160px;
border-radius: 50%;
border: 14px solid transparent;
}


#insurerbrain-module-solvency2-bs .ib-review-item {
.gauge-bg {
display: flex;
border-top-color: var(--border);
align-items: flex-start;
border-left-color: var(--border);
gap: 0.6rem;
border-right-color: var(--border);
padding: 0.65rem 0;
transform: rotate(0deg);
border-bottom: 1px solid var(--ib-neutral-border);
}
font-size: 0.92em;
line-height: 1.45;
}


#insurerbrain-module-solvency2-bs .ib-review-icon {
.gauge-fill {
flex-shrink: 0;
border-top-color: var(--accent-emerald);
width: 1.25rem;
border-left-color: var(--accent-emerald);
height: 1.25rem;
border-right-color: transparent;
border-radius: 50%;
transform: rotate(0deg);
display: flex;
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
align-items: center;
}
justify-content: center;
font-size: 0.7em;
font-weight: 700;
color: #fff;
margin-top: 0.15rem;
}


#insurerbrain-module-solvency2-bs .ib-review-icon.ib-ri-correct {
.gauge-value {
background: var(--ib-correct);
font-family: 'IBM Plex Mono', monospace;
}
font-size: 28px;
font-weight: 600;
color: var(--accent-emerald);
margin-bottom: 4px;
}


#insurerbrain-module-solvency2-bs .ib-review-icon.ib-ri-wrong {
.gauge-label {
background: var(--ib-wrong);
font-size: 12px;
}
color: var(--text-muted);
font-weight: 500;
}


/* ── Animation ───────────────────────────────────────────── */
.gauge-thresholds {
@keyframes ibFadeIn {
display: flex;
from { opacity: 0; transform: translateY(6px); }
justify-content: space-between;
to { opacity: 1; transform: translateY(0); }
margin-top: 12px;
}
padding: 0 4px;
}


#insurerbrain-module-solvency2-bs .ib-animate-in {
.gauge-thresholds span {
animation: ibFadeIn 0.3s ease;
font-family: 'IBM Plex Mono', monospace;
}
font-size: 10px;
color: var(--text-muted);
}


/* ── Responsive ──────────────────────────────────────────── */
/* Slider controls */
@media (max-width: 480px) {
.controls-card {
#insurerbrain-module-solvency2-bs .ib-card {
padding: 24px;
padding: 1rem;
}
}
#insurerbrain-module-solvency2-bs .ib-option {

padding: 0.6rem 0.75rem;
.slider-group {
margin-bottom: 18px;
}
}
#insurerbrain-module-solvency2-bs .ib-q-topic {

display: none;
.slider-group:last-child { margin-bottom: 0; }

.slider-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
}
}
</style>


<!-- Progress -->
.slider-header label {
<div class="ib-progress-wrap">
font-size: 12.5px;
<span class="ib-progress-label" id="ib-s2-progress-text">Question 1 / 10</span>
font-weight: 500;
<div class="ib-progress-track">
color: var(--text-dim);
<div class="ib-progress-fill" id="ib-s2-progress-bar"></div>
}
</div>
</div>


<!-- Question Area -->
.slider-header .slider-val {
<div id="ib-s2-question-area"></div>
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
font-weight: 500;
}


<!-- Navigation -->
input[type="range"] {
<div class="ib-nav" id="ib-s2-nav">
-webkit-appearance: none;
<button class="ib-btn ib-btn-outline" id="ib-s2-btn-restart" style="display:none;">Restart</button>
width: 100%;
<button class="ib-btn" id="ib-s2-btn-next" disabled>Next &rarr;</button>
height: 4px;
</div>
border-radius: 2px;
background: var(--border);
outline: none;
cursor: pointer;
}


<!-- Results (hidden initially) -->
input[type="range"]::-webkit-slider-thumb {
<div class="ib-results" id="ib-s2-results" style="display:none;"></div>
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--accent-cyan);
box-shadow: 0 0 10px rgba(34, 211, 238, 0.4);
cursor: pointer;
transition: transform 0.15s ease;
}


<script>
input[type="range"]::-webkit-slider-thumb:hover {
(function() {
transform: scale(1.2);
/* ── Question Bank ───────────────────────────────────── */
}
var questions = [
{
topic: "Valuation",
text: "Under Solvency II, how must an insurer's assets be valued on the economic balance sheet?",
options: [
"At historical cost, consistent with IFRS 9",
"At market-consistent (fair) value, using quoted market prices where available",
"At the lower of cost and net realisable value",
"At amortised cost with an impairment overlay"
],
answer: 1,
explanation: "Solvency II requires a market-consistent valuation framework. Assets must be valued at the amount for which they could be exchanged between knowledgeable, willing parties in an arm's-length transaction — effectively fair value, with quoted market prices used where an active market exists."
},
{
topic: "Technical Provisions",
text: "Technical provisions under Solvency II are equal to the sum of which two components?",
options: [
"Unearned Premium Reserve + Claims Outstanding Reserve",
"Best Estimate Liability (BEL) + Risk Margin",
"Solvency Capital Requirement + Risk Margin",
"Best Estimate Liability (BEL) + Matching Adjustment"
],
answer: 1,
explanation: "Article 77 of the Solvency II Directive defines technical provisions as the sum of the Best Estimate Liability (BEL) — a probability-weighted average of future cash flows discounted using the risk-free rate term structure — and the Risk Margin, which represents the cost of holding capital to run off the obligations."
},
{
topic: "Risk Margin",
text: "What does the Risk Margin in Solvency II conceptually represent?",
options: [
"A buffer to protect against adverse reserve development",
"The cost-of-capital that a reference undertaking would require to take over and run off the insurance obligations",
"A regulatory add-on calibrated at the 99.5% VaR over one year",
"The expected profit embedded in future premiums"
],
answer: 1,
explanation: "The Risk Margin is calculated using a cost-of-capital approach. It represents the cost a hypothetical reference undertaking would charge — above the Best Estimate — for holding the Solvency Capital Requirement needed to support the obligations until they are fully run off."
},
{
topic: "Discount Rate",
text: "Which rate curve is prescribed for discounting the Best Estimate Liability under Solvency II?",
options: [
"The insurer's own investment return assumptions",
"Government bond yields of the currency of the obligation",
"The risk-free interest rate term structure published by EIOPA",
"The swap rate plus a fixed credit spread"
],
answer: 2,
explanation: "EIOPA publishes the relevant risk-free interest rate term structure each month. It is derived primarily from swap rates, adjusted to remove the credit risk component (Credit Risk Adjustment), and extrapolated beyond the Last Liquid Point toward an Ultimate Forward Rate."
},
{
topic: "Own Funds",
text: "Under Solvency II, 'Own Funds' that can cover the SCR are classified into how many quality tiers?",
options: [
"Two tiers",
"Three tiers",
"Four tiers",
"Five tiers"
],
answer: 1,
explanation: "Own Funds are classified into three tiers based on their quality — primarily their permanence and loss-absorption capacity. Tier 1 is the highest quality (e.g. ordinary share capital, retained earnings), Tier 2 includes items like subordinated liabilities, and Tier 3 captures lower-quality items such as net deferred tax assets."
},
{
topic: "SCR",
text: "The Solvency Capital Requirement (SCR) under the Standard Formula is calibrated to which confidence level over which time horizon?",
options: [
"95.0% Value-at-Risk over a one-year period",
"99.0% Value-at-Risk over a run-off period",
"99.5% Value-at-Risk over a one-year period",
"99.5% Tail Value-at-Risk over a one-year period"
],
answer: 2,
explanation: "The SCR corresponds to the Value-at-Risk of Basic Own Funds at a 99.5% confidence level over a one-year time horizon. This means the insurer should hold enough capital to survive a 1-in-200 year loss event."
},
{
topic: "MCR",
text: "What happens if an insurer's eligible Own Funds fall below the Minimum Capital Requirement (MCR)?",
options: [
"The insurer must submit a revised ORSA within 30 days",
"The supervisor may ultimately withdraw the insurer's authorisation",
"The insurer is placed into an automatic run-off of all existing policies",
"A mandatory dividend suspension is triggered but operations continue"
],
answer: 1,
explanation: "Breaching the MCR represents the most severe regulatory threshold under Solvency II. If an insurer fails to restore Own Funds above the MCR within a short recovery period, the supervisory authority has the power to withdraw the firm's authorisation to write new business."
},
{
topic: "Balance Sheet",
text: "On the Solvency II balance sheet, the excess of assets over liabilities represents which of the following?",
options: [
"The Solvency Capital Requirement",
"The Basic Own Funds",
"The Risk Margin",
"The Free Surplus"
],
answer: 1,
explanation: "The difference between the market-consistent value of assets and the total of technical provisions plus other liabilities equals the Basic Own Funds. When combined with any Ancillary Own Funds (off-balance-sheet items approved by the supervisor), this gives the total Own Funds available to meet capital requirements."
},
{
topic: "Volatility Adjustment",
text: "What is the primary purpose of the Volatility Adjustment (VA) under Solvency II?",
options: [
"To reflect the insurer's superior asset management skills",
"To mitigate the effect of exaggerated bond spreads on the valuation of insurance liabilities",
"To increase the SCR during periods of market stress",
"To accelerate the convergence of the discount curve to the Ultimate Forward Rate"
],
answer: 1,
explanation: "The Volatility Adjustment is added to the risk-free rate curve to prevent artificial balance-sheet volatility when credit spreads widen beyond levels justified by fundamental default risk. It is particularly relevant for insurers that hold bonds to maturity and whose liabilities are not sensitive to short-term spread movements."
},
{
topic: "Matching Adjustment",
text: "Which condition must be satisfied for an insurer to apply the Matching Adjustment to its discount rate?",
options: [
"The insurer must use an internal model approved by the supervisor",
"The portfolio of assets must be ring-fenced and assigned to a portfolio of obligations with predictable cash flows",
"The insurer must demonstrate a Solvency Ratio above 150%",
"The insurer must exclusively write long-term life business"
],
answer: 1,
explanation: "The Matching Adjustment may be applied when the insurer holds a ring-fenced, assigned portfolio of assets whose cash flows replicate the expected cash flows of the matched liabilities. The obligations must have predictable cash flows (e.g. annuities), and the asset portfolio must be managed separately from other business."
}
];


/* ── State ───────────────────────────────────────────── */
/* Legend items below chart */
var root = document.getElementById('insurerbrain-module-solvency2-bs');
.legend-strip {
var qArea = root.querySelector('#ib-s2-question-area');
display: flex;
var progText = root.querySelector('#ib-s2-progress-text');
flex-wrap: wrap;
var progBar = root.querySelector('#ib-s2-progress-bar');
gap: 6px;
var navEl = root.querySelector('#ib-s2-nav');
margin-top: 24px;
var btnNext = root.querySelector('#ib-s2-btn-next');
}
var btnRestart = root.querySelector('#ib-s2-btn-restart');
var resultsEl = root.querySelector('#ib-s2-results');
var currentQ = 0;
var score = 0;
var answered = false;
var userAnswers = [];


/* ── Render Question ─────────────────────────────────── */
.legend-item {
function renderQuestion() {
display: flex;
var q = questions[currentQ];
align-items: center;
var keys = ['A', 'B', 'C', 'D'];
gap: 6px;
padding: 5px 10px;
answered = false;
btnNext.disabled = true;
background: rgba(255,255,255,0.03);
btnNext.textContent = currentQ < questions.length - 1 ? 'Next \u2192' : 'See Results';
border: 1px solid var(--border);
progText.textContent = 'Question ' + (currentQ + 1) + ' / ' + questions.length;
border-radius: 6px;
progBar.style.width = ((currentQ) / questions.length * 100) + '%';
font-size: 11px;
color: var(--text-dim);
cursor: pointer;
transition: all 0.2s ease;
}


var html = '<div class="ib-card ib-animate-in">';
.legend-item:hover {
html += '<div class="ib-q-header">';
background: rgba(255,255,255,0.06);
html += '<span class="ib-q-number">' + (currentQ + 1) + '</span>';
color: var(--text);
html += '<span class="ib-q-topic">' + q.topic + '</span>';
}
html += '</div>';
html += '<div class="ib-q-text">' + q.text + '</div>';
html += '<div class="ib-options">';
for (var i = 0; i < q.options.length; i++) {
html += '<div class="ib-option" data-idx="' + i + '" role="button" tabindex="0">';
html += '<span class="ib-option-key">' + keys[i] + '</span>';
html += '<span class="ib-option-text">' + q.options[i] + '</span>';
html += '</div>';
}
html += '</div>';
html += '<div class="ib-feedback" id="ib-s2-feedback"></div>';
html += '</div>';


qArea.innerHTML = html;
.legend-dot {
width: 8px;
height: 8px;
border-radius: 2px;
flex-shrink: 0;
}


var opts = qArea.querySelectorAll('.ib-option');
/* Bracket annotations on liabilities side */
for (var j = 0; j < opts.length; j++) {
.bracket-area {
opts[j].addEventListener('click', handleOptionClick);
position: relative;
opts[j].addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleOptionClick.call(this, e); }
});
}
}
}


/* ── Handle Answer ───────────────────────────────────── */
.bracket-label {
function handleOptionClick() {
position: absolute;
right: -28px;
if (answered) return;
answered = true;
writing-mode: vertical-rl;
var idx = parseInt(this.getAttribute('data-idx'), 10);
text-orientation: mixed;
var q = questions[currentQ];
font-family: 'IBM Plex Mono', monospace;
var isCorrect = idx === q.answer;
font-size: 10px;
if (isCorrect) score++;
letter-spacing: 1.5px;
userAnswers.push({ qIndex: currentQ, chosen: idx, correct: isCorrect });
text-transform: uppercase;
color: var(--text-muted);
opacity: 0.6;
}


var opts = qArea.querySelectorAll('.ib-option');
/* Animations */
for (var k = 0; k < opts.length; k++) {
@keyframes fadeUp {
opts[k].classList.add('ib-disabled');
from { opacity: 0; transform: translateY(16px); }
if (parseInt(opts[k].getAttribute('data-idx'), 10) === q.answer) {
to { opacity: 1; transform: translateY(0); }
opts[k].classList.add('ib-correct-answer');
}
}
if (parseInt(opts[k].getAttribute('data-idx'), 10) === idx && !isCorrect) {
opts[k].classList.add('ib-wrong-answer');
}
}


var fb = qArea.querySelector('#ib-s2-feedback');
@keyframes slideIn {
fb.className = 'ib-feedback ib-show ' + (isCorrect ? 'ib-fb-correct' : 'ib-fb-wrong');
from { opacity: 0; transform: translateX(-8px); }
fb.innerHTML = '<strong>' + (isCorrect ? '\u2713 Correct' : '\u2717 Incorrect') + '</strong>'
to { opacity: 1; transform: translateX(0); }
+ '<span class="ib-explanation">' + q.explanation + '</span>';
}


btnNext.disabled = false;
.bs-block {
animation: slideIn 0.5s ease-out both;
}
}


/* ── Show Results ────────────────────────────────────── */
.bs-col:first-child .bs-block:nth-child(1) { animation-delay: 0.2s; }
function showResults() {
.bs-col:last-child .bs-block:nth-child(1) { animation-delay: 0.3s; }
progBar.style.width = '100%';
.bs-col:last-child .bs-block:nth-child(2) { animation-delay: 0.4s; }
progText.textContent = 'Completed';
.bs-col:last-child .bs-block:nth-child(3) { animation-delay: 0.5s; }
qArea.style.display = 'none';
.bs-col:last-child .bs-block:nth-child(4) { animation-delay: 0.6s; }
navEl.style.display = 'none';
resultsEl.style.display = 'block';


var pct = Math.round((score / questions.length) * 100);
/* Tooltip */
var circumference = 2 * Math.PI * 42; // r=42
.tooltip {
var msg = pct >= 80 ? 'Excellent — you have a strong grasp of the Solvency II balance sheet.'
position: fixed;
: pct >= 50 ? 'Good effort. Review the explanations below to strengthen weaker areas.'
background: #1e293b;
: 'Keep studying. The Solvency II economic balance sheet has many nuances worth revisiting.';
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 14px;
font-size: 12px;
color: var(--text);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
max-width: 220px;
z-index: 100;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}


var html = '<div class="ib-card ib-animate-in">';
.tooltip.show { opacity: 1; }
html += '<div class="ib-score-ring">';
html += '<svg viewBox="0 0 100 100"><circle class="ib-ring-bg" cx="50" cy="50" r="42"/>';
html += '<circle class="ib-ring-fill" id="ib-s2-ring" cx="50" cy="50" r="42"/></svg>';
html += '<div class="ib-score-label"><span class="ib-score-pct">' + pct + '%</span>';
html += '<span class="ib-score-sub">' + score + ' / ' + questions.length + '</span></div>';
html += '</div>';
html += '<div class="ib-results-msg">' + msg + '</div>';


html += '<div class="ib-review-list">';
/* Grouped brackets */
for (var i = 0; i < userAnswers.length; i++) {
.group-bracket {
var ua = userAnswers[i];
position: absolute;
var q = questions[ua.qIndex];
display: flex;
html += '<div class="ib-review-item">';
align-items: center;
html += '<span class="ib-review-icon ' + (ua.correct ? 'ib-ri-correct' : 'ib-ri-wrong') + '">'
pointer-events: none;
+ (ua.correct ? '\u2713' : '\u2717') + '</span>';
z-index: 3;
html += '<span>' + q.text + '</span>';
}
html += '</div>';
}
html += '</div>';
html += '<div style="margin-top:1.5rem;">';
html += '<button class="ib-btn" id="ib-s2-btn-retry">Retake Quiz</button>';
html += '</div>';
html += '</div>';


resultsEl.innerHTML = html;
.group-bracket .bracket-line {
width: 2px;
background: currentColor;
border-radius: 1px;
opacity: 0.4;
}


// Animate ring
.group-bracket .bracket-text {
setTimeout(function() {
font-family: 'IBM Plex Mono', monospace;
var ring = root.querySelector('#ib-s2-ring');
font-size: 10px;
if (ring) {
letter-spacing: 1px;
ring.style.strokeDashoffset = circumference - (circumference * pct / 100);
text-transform: uppercase;
}
writing-mode: vertical-rl;
text-orientation: mixed;
}, 60);
padding: 0 6px;
opacity: 0.5;
}


var retryBtn = resultsEl.querySelector('#ib-s2-btn-retry');
/* Flow arrow between assets and liab */
if (retryBtn) retryBtn.addEventListener('click', resetQuiz);
.flow-arrow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--text-muted);
font-size: 10px;
font-family: 'IBM Plex Mono', monospace;
}
}


/* ── Reset ───────────────────────────────────────────── */
.flow-arrow svg {
function resetQuiz() {
opacity: 0.3;
currentQ = 0;
score = 0;
answered = false;
userAnswers = [];
resultsEl.style.display = 'none';
resultsEl.innerHTML = '';
qArea.style.display = 'block';
navEl.style.display = 'flex';
btnRestart.style.display = 'none';
renderQuestion();
}
}


/* ── Next Button ─────────────────────────────────────── */
/* Small badge */
btnNext.addEventListener('click', function() {
.tier-badge {
if (!answered) return;
display: inline-block;
padding: 2px 7px;
currentQ++;
if (currentQ >= questions.length) {
border-radius: 4px;
showResults();
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
} else {
renderQuestion();
font-weight: 600;
}
letter-spacing: 0.5px;
});
margin-top: 4px;
}


btnRestart.addEventListener('click', resetQuiz);
.tier-1 { background: rgba(52, 211, 153, 0.15); color: var(--accent-emerald); }
.tier-2 { background: rgba(251, 191, 36, 0.15); color: var(--accent-amber); }
.tier-3 { background: rgba(251, 113, 133, 0.15); color: var(--accent-rose); }


/* ── Init ─────────────────────────────────────────────── */
/* Status bar */
renderQuestion();
.status-bar {
})();
display: flex;
</script>
gap: 24px;
justify-content: center;
margin-top: 16px;
flex-wrap: wrap;
}


.status-item {
display: flex;
align-items: center;
gap: 8px;
}

.status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}

.status-dot.green { background: var(--accent-emerald); box-shadow: 0 0 8px rgba(52,211,153,0.5); }
.status-dot.amber { background: var(--accent-amber); box-shadow: 0 0 8px rgba(251,191,36,0.5); }
.status-dot.red { background: var(--accent-rose); box-shadow: 0 0 8px rgba(251,113,133,0.5); }

.status-item span {
font-size: 11px;
color: var(--text-dim);
font-weight: 500;
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="eyebrow">Insurance Regulation Framework</div>
<h1>Solvency II Balance Sheet</h1>
<p>An interactive breakdown of the market-value balance sheet under the EU Solvency II Directive — explore how assets, technical provisions, and capital requirements interconnect.</p>
</header>

<div class="main-grid">
<!-- Left: Balance sheet visual -->
<div>
<div class="bs-visual" id="bsVisual">
<div class="bs-title-row">
<span class="bs-col-label">Assets</span>
<span class="bs-col-label">Liabilities & Own Funds</span>
</div>
<div class="bs-columns" id="bsColumns">
<!-- Assets column -->
<div class="bs-col" id="assetsCol"></div>
<!-- Separator -->
<div class="bs-separator">
<div class="line"></div>
</div>
<!-- Liabilities column -->
<div class="bs-col" id="liabCol"></div>
</div>

<div class="legend-strip" id="legend"></div>
</div>

<div class="status-bar" id="statusBar"></div>
</div>

<!-- Right: Side panel -->
<div class="side-panel">
<!-- Solvency ratio -->
<div class="info-card gauge-card">
<div class="card-label">Solvency Ratio</div>
<div class="gauge-value" id="ratioValue">—</div>
<div class="gauge-label">Eligible Own Funds / SCR</div>
<div class="gauge-thresholds">
<span style="color:var(--accent-rose)">100% min</span>
<span style="color:var(--accent-amber)">150%</span>
<span style="color:var(--accent-emerald)">200%+</span>
</div>
<div style="margin-top:14px; height:6px; border-radius:3px; background:var(--border); overflow:hidden;">
<div id="ratioBar" style="height:100%; border-radius:3px; transition: width 0.8s ease, background 0.5s ease;"></div>
</div>
</div>

<!-- Adjust values -->
<div class="info-card controls-card">
<div class="card-label">Adjust Values (€ bn)</div>

<div class="slider-group">
<div class="slider-header">
<label>Total Assets</label>
<span class="slider-val" id="valAssets" style="color:var(--assets-color)">150</span>
</div>
<input type="range" id="sliderAssets" min="80" max="250" value="150">
</div>

<div class="slider-group">
<div class="slider-header">
<label>Best Estimate Liabilities</label>
<span class="slider-val" id="valBEL" style="color:var(--bel-color)">85</span>
</div>
<input type="range" id="sliderBEL" min="30" max="180" value="85">
</div>

<div class="slider-group">
<div class="slider-header">
<label>Risk Margin</label>
<span class="slider-val" id="valRM" style="color:var(--rm-color)">8</span>
</div>
<input type="range" id="sliderRM" min="1" max="30" value="8">
</div>

<div class="slider-group">
<div class="slider-header">
<label>SCR</label>
<span class="slider-val" id="valSCR" style="color:var(--scr-color)">35</span>
</div>
<input type="range" id="sliderSCR" min="10" max="80" value="35">
</div>

<div class="slider-group">
<div class="slider-header">
<label>MCR (% of SCR)</label>
<span class="slider-val" id="valMCR" style="color:var(--accent-violet)">35%</span>
</div>
<input type="range" id="sliderMCR" min="20" max="50" value="35">
</div>
</div>

<!-- Detail panel -->
<div class="info-card" id="detailCard">
<div class="card-label">Component Detail</div>
<h3 id="detailTitle">Hover over a block</h3>
<p id="detailDesc">Click or hover on any component in the balance sheet to see its definition, purpose, and how it connects to other elements.</p>
<div class="formula" id="detailFormula" style="display:none;"></div>
</div>
</div>
</div>
</div>
</div>

<div class="tooltip" id="tooltip"></div>

<script>
const data = {
assets: 150,
bel: 85,
rm: 8,
scr: 35,
mcrPct: 35
};

const descriptions = {
assets: {
title: 'Market Value of Assets',
desc: 'All assets held by the insurer valued at fair (market) value under Solvency II. This includes bonds, equities, property, cash, reinsurance recoverables, and other investments. Market-consistent valuation is a core SII principle.',
formula: null
},
bel: {
title: 'Best Estimate Liabilities (BEL)',
desc: 'The probability-weighted average of future cash flows for insurance obligations, discounted using the relevant risk-free interest rate term structure prescribed by EIOPA. It represents the expected cost of meeting policyholder obligations.',
formula: 'BEL = Σ PV(expected future cash flows)'
},
rm: {
title: 'Risk Margin',
desc: 'An additional amount over the BEL to ensure technical provisions are sufficient. Calculated as the cost of holding eligible own funds equal to the SCR over the lifetime of the obligations, using a prescribed cost-of-capital rate (currently 6%).',
formula: 'RM = CoC × Σ SCR(t) / (1 + r(t))^t'
},
tp: {
title: 'Technical Provisions (TP)',
desc: 'The total value of insurance liabilities — the sum of the Best Estimate Liabilities and the Risk Margin. This represents the full amount the insurer must reserve to meet policyholder obligations.',
formula: 'TP = BEL + Risk Margin'
},
scr: {
title: 'Solvency Capital Requirement',
desc: 'The capital buffer required to absorb significant unforeseen losses over a 1-year period with a 99.5% confidence level (i.e. a 1-in-200 year event). Can be calculated via the Standard Formula or an approved Internal Model.',
formula: 'SCR = VaR₉₉.₅%(Basic Own Funds) over 1 year'
},
mcr: {
title: 'Minimum Capital Requirement',
desc: 'The minimum level of security below which the amount of financial resources should not fall. Breach triggers ultimate supervisory intervention — the insurer\'s license may be withdrawn. Bounded between 25%–45% of SCR.',
formula: 'MCR = max(25% × SCR, min(45% × SCR, linear MCR))'
},
surplus: {
title: 'Free Surplus',
desc: 'Own funds in excess of the SCR — the capital cushion above regulatory requirements. A healthy surplus signals strong financial resilience and may support dividend distributions or growth strategies.',
formula: 'Surplus = Own Funds − SCR'
},
ownfunds: {
title: 'Eligible Own Funds',
desc: 'Total own funds available to cover the SCR and MCR. Classified into Tier 1 (highest quality — equity, retained earnings), Tier 2 (subordinated debt), and Tier 3 (limited eligibility). Tiering limits apply when covering SCR/MCR.',
formula: 'Own Funds = Assets − Technical Provisions'
}
};

const legendItems = [
{ id: 'assets', label: 'Assets', color: 'var(--assets-color)' },
{ id: 'bel', label: 'BEL', color: 'var(--bel-color)' },
{ id: 'rm', label: 'Risk Margin', color: 'var(--rm-color)' },
{ id: 'scr', label: 'SCR', color: 'var(--scr-color)' },
{ id: 'mcr', label: 'MCR', color: 'var(--accent-violet)' },
{ id: 'surplus', label: 'Surplus', color: 'var(--surplus-color)' },
];

function compute() {
const tp = data.bel + data.rm;
const ownFunds = Math.max(0, data.assets - tp);
const mcr = Math.round(data.scr * data.mcrPct / 100);
const surplus = Math.max(0, ownFunds - data.scr);
const ratio = data.scr > 0 ? (ownFunds / data.scr * 100) : 0;
return { tp, ownFunds, mcr, surplus, ratio };
}

function render() {
const { tp, ownFunds, mcr, surplus, ratio } = compute();
const total = data.assets;
const totalLiab = tp + data.scr + Math.max(0, surplus);

// Height proportions (use asset total as reference)
const ref = Math.max(total, totalLiab, 1);
const totalH = 480;
const pxPer = totalH / ref;

// Assets column
const assetsCol = document.getElementById('assetsCol');
assetsCol.innerHTML = '';

const assetBlock = makeBlock('assets', 'block-assets', 'Total Assets', `Market value`, `€${data.assets}bn`, totalH);
assetsCol.appendChild(assetBlock);

// Liabilities column
const liabCol = document.getElementById('liabCol');
liabCol.innerHTML = '';

// BEL
const belH = Math.max(32, data.bel * pxPer);
liabCol.appendChild(makeBlock('bel', 'block-bel', 'Best Estimate Liabilities', 'Discounted expected cash flows', `€${data.bel}bn`, belH));

// Risk Margin
const rmH = Math.max(28, data.rm * pxPer);
liabCol.appendChild(makeBlock('rm', 'block-rm', 'Risk Margin', 'Cost-of-capital provision', `€${data.rm}bn`, rmH));

// SCR (show MCR within)
const scrH = Math.max(40, data.scr * pxPer);
const scrBlock = makeBlock('scr', 'block-scr', 'SCR', `Solvency Capital Req.`, `€${data.scr}bn`, scrH);
// MCR badge inside SCR
const mcrBadge = document.createElement('div');
mcrBadge.className = 'tier-badge tier-3';
mcrBadge.textContent = `MCR €${mcr}bn`;
mcrBadge.style.position = 'relative';
mcrBadge.style.cursor = 'pointer';
mcrBadge.dataset.block = 'mcr';
scrBlock.appendChild(mcrBadge);
liabCol.appendChild(scrBlock);

// Surplus
if (surplus > 0) {
const surpH = Math.max(28, surplus * pxPer);
liabCol.appendChild(makeBlock('surplus', 'block-surplus', 'Free Surplus', 'Excess own funds', `€${surplus}bn`, surpH));
} else if (ownFunds < data.scr) {
const deficitH = 32;
const defBlock = makeBlock('surplus', 'block-scr', 'Capital Shortfall', 'Own funds < SCR', `€${Math.round(data.scr - ownFunds)}bn deficit`, deficitH);
defBlock.style.border = '1px dashed var(--accent-rose)';
liabCol.appendChild(defBlock);
}

// Ratio bar
const rVal = document.getElementById('ratioValue');
const rBar = document.getElementById('ratioBar');
rVal.textContent = `${Math.round(ratio)}%`;
const barW = Math.min(100, ratio / 3);
rBar.style.width = barW + '%';
if (ratio >= 150) {
rVal.style.color = 'var(--accent-emerald)';
rBar.style.background = 'var(--accent-emerald)';
} else if (ratio >= 100) {
rVal.style.color = 'var(--accent-amber)';
rBar.style.background = 'var(--accent-amber)';
} else {
rVal.style.color = 'var(--accent-rose)';
rBar.style.background = 'var(--accent-rose)';
}

// Status bar
const sb = document.getElementById('statusBar');
const scrStatus = ownFunds >= data.scr;
const mcrStatus = ownFunds >= mcr;
sb.innerHTML = `
<div class="status-item">
<div class="status-dot ${scrStatus ? 'green' : 'red'}"></div>
<span>SCR ${scrStatus ? 'Covered' : 'Breached'}</span>
</div>
<div class="status-item">
<div class="status-dot ${mcrStatus ? 'green' : 'red'}"></div>
<span>MCR ${mcrStatus ? 'Covered' : 'Breached'}</span>
</div>
<div class="status-item">
<div class="status-dot ${ratio >= 150 ? 'green' : ratio >= 100 ? 'amber' : 'red'}"></div>
<span>Ratio: ${Math.round(ratio)}%</span>
</div>
<div class="status-item" style="cursor:pointer;" onclick="showDetail('ownfunds')">
<div class="status-dot" style="background:var(--accent-cyan);box-shadow:0 0 8px rgba(34,211,238,0.5);"></div>
<span>Own Funds: €${Math.round(ownFunds)}bn</span>
</div>
`;

// Legend
const legend = document.getElementById('legend');
legend.innerHTML = '';
legendItems.forEach(l => {
const li = document.createElement('div');
li.className = 'legend-item';
li.innerHTML = `<span class="legend-dot" style="background:${l.color}"></span>${l.label}`;
li.onclick = () => showDetail(l.id);
legend.appendChild(li);
});
// Add TP and Own Funds to legend
[{ id: 'tp', label: 'Tech. Provisions', color: 'var(--tp-color)' },
{ id: 'ownfunds', label: 'Own Funds', color: 'var(--own-funds-color)' }
].forEach(l => {
const li = document.createElement('div');
li.className = 'legend-item';
li.innerHTML = `<span class="legend-dot" style="background:${l.color}"></span>${l.label}`;
li.onclick = () => showDetail(l.id);
legend.appendChild(li);
});
}

function makeBlock(id, cls, label, sublabel, value, height) {
const el = document.createElement('div');
el.className = `bs-block ${cls}`;
el.style.height = height + 'px';
el.dataset.block = id;
el.innerHTML = `
<div class="label">${label}</div>
${height > 40 ? `<div class="sublabel">${sublabel}</div>` : ''}
<div class="value">${value}</div>
`;
el.addEventListener('mouseenter', () => showDetail(id));
el.addEventListener('click', () => showDetail(id));
return el;
}

function showDetail(id) {
const info = descriptions[id];
if (!info) return;
document.getElementById('detailTitle').textContent = info.title;
document.getElementById('detailDesc').textContent = info.desc;
const fEl = document.getElementById('detailFormula');
if (info.formula) {
fEl.style.display = 'block';
fEl.textContent = info.formula;
} else {
fEl.style.display = 'none';
}

// Highlight active block
document.querySelectorAll('.bs-block').forEach(b => b.classList.remove('active'));
document.querySelectorAll(`.bs-block[data-block="${id}"]`).forEach(b => b.classList.add('active'));
}

// Slider bindings
function bindSlider(sliderId, valId, key, suffix = '') {
const slider = document.getElementById(sliderId);
const valEl = document.getElementById(valId);
slider.addEventListener('input', () => {
const v = parseInt(slider.value);
data[key] = v;
valEl.textContent = suffix ? v + suffix : v;
render();
});
}

bindSlider('sliderAssets', 'valAssets', 'assets');
bindSlider('sliderBEL', 'valBEL', 'bel');
bindSlider('sliderRM', 'valRM', 'rm');
bindSlider('sliderSCR', 'valSCR', 'scr');
bindSlider('sliderMCR', 'valMCR', 'mcrPct', '%');

// Initial render
render();
</script>
</body>
</html>

Latest revision as of 10:21, 31 March 2026

<style> /* ── Reset & Container ──────────────────────────────────── */

  1. insurerbrain-module-solvency2-bs *,
  2. insurerbrain-module-solvency2-bs *::before,
  3. insurerbrain-module-solvency2-bs *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;

}

  1. insurerbrain-module-solvency2-bs {
 --ib-accent: #1a5276;
 --ib-accent-light: #d4e6f1;
 --ib-correct: #1e8449;
 --ib-correct-bg: #d5f5e3;
 --ib-correct-border: #82e0aa;
 --ib-wrong: #922b21;
 --ib-wrong-bg: #fadbd8;
 --ib-wrong-border: #f1948a;
 --ib-neutral-bg: #f8f9fa;
 --ib-neutral-border: #c8ccd1;
 --ib-text: #202122;
 --ib-text-muted: #54595d;
 --ib-radius: 4px;
 --ib-transition: 0.25s ease;

 max-width: 52rem;
 padding: 1.5rem 0;
 color: var(--ib-text);

}

/* ── Progress Bar ────────────────────────────────────────── */

  1. insurerbrain-module-solvency2-bs .ib-progress-wrap {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin-bottom: 1.25rem;

}

  1. insurerbrain-module-solvency2-bs .ib-progress-label {
 white-space: nowrap;
 color: var(--ib-text-muted);
 font-size: 0.875em;
 min-width: 6.5rem;

}

  1. insurerbrain-module-solvency2-bs .ib-progress-track {
 flex: 1;
 height: 6px;
 background: var(--ib-neutral-bg);
 border: 1px solid var(--ib-neutral-border);
 border-radius: 3px;
 overflow: hidden;

}

  1. insurerbrain-module-solvency2-bs .ib-progress-fill {
 height: 100%;
 width: 0%;
 background: var(--ib-accent);
 border-radius: 3px;
 transition: width 0.4s ease;

}

/* ── Question Card ───────────────────────────────────────── */

  1. insurerbrain-module-solvency2-bs .ib-card {
 background: var(--ib-neutral-bg);
 border: 1px solid var(--ib-neutral-border);
 border-radius: var(--ib-radius);
 padding: 1.5rem;
 margin-bottom: 1rem;

}

  1. insurerbrain-module-solvency2-bs .ib-q-header {
 display: flex;
 align-items: baseline;
 gap: 0.5rem;
 margin-bottom: 1rem;

}

  1. insurerbrain-module-solvency2-bs .ib-q-number {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.75rem;
 height: 1.75rem;
 background: var(--ib-accent);
 color: #fff;
 border-radius: 50%;
 font-size: 0.8em;
 font-weight: 700;
 flex-shrink: 0;

}

  1. insurerbrain-module-solvency2-bs .ib-q-topic {
 font-size: 0.8em;
 color: var(--ib-text-muted);
 border: 1px solid var(--ib-neutral-border);
 border-radius: 2px;
 padding: 0.1rem 0.45rem;
 margin-left: auto;
 white-space: nowrap;

}

  1. insurerbrain-module-solvency2-bs .ib-q-text {
 margin-bottom: 1.25rem;
 line-height: 1.55;

}

/* ── Options ─────────────────────────────────────────────── */

  1. insurerbrain-module-solvency2-bs .ib-options {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;

}

  1. insurerbrain-module-solvency2-bs .ib-option {
 display: flex;
 align-items: flex-start;
 gap: 0.75rem;
 padding: 0.75rem 1rem;
 border: 1px solid var(--ib-neutral-border);
 border-radius: var(--ib-radius);
 background: #fff;
 cursor: pointer;
 transition: border-color var(--ib-transition), background var(--ib-transition);
 line-height: 1.45;

}

  1. insurerbrain-module-solvency2-bs .ib-option:hover:not(.ib-disabled) {
 border-color: var(--ib-accent);
 background: var(--ib-accent-light);

}

  1. insurerbrain-module-solvency2-bs .ib-option.ib-selected:not(.ib-disabled) {
 border-color: var(--ib-accent);
 background: var(--ib-accent-light);

}

  1. insurerbrain-module-solvency2-bs .ib-option.ib-disabled {
 cursor: default;
 opacity: 0.85;

}

  1. insurerbrain-module-solvency2-bs .ib-option.ib-correct-answer {
 border-color: var(--ib-correct-border);
 background: var(--ib-correct-bg);
 opacity: 1;

}

  1. insurerbrain-module-solvency2-bs .ib-option.ib-wrong-answer {
 border-color: var(--ib-wrong-border);
 background: var(--ib-wrong-bg);
 opacity: 1;

}

  1. insurerbrain-module-solvency2-bs .ib-option-key {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.5rem;
 height: 1.5rem;
 border: 1.5px solid var(--ib-neutral-border);
 border-radius: 50%;
 font-size: 0.8em;
 font-weight: 600;
 flex-shrink: 0;
 transition: border-color var(--ib-transition), background var(--ib-transition), color var(--ib-transition);

}

  1. insurerbrain-module-solvency2-bs .ib-option.ib-selected .ib-option-key {
 border-color: var(--ib-accent);
 background: var(--ib-accent);
 color: #fff;

}

  1. insurerbrain-module-solvency2-bs .ib-option.ib-correct-answer .ib-option-key {
 border-color: var(--ib-correct);
 background: var(--ib-correct);
 color: #fff;

}

  1. insurerbrain-module-solvency2-bs .ib-option.ib-wrong-answer .ib-option-key {
 border-color: var(--ib-wrong);
 background: var(--ib-wrong);
 color: #fff;

}

  1. insurerbrain-module-solvency2-bs .ib-option-text {
 padding-top: 0.1rem;

}

/* ── Feedback ────────────────────────────────────────────── */

  1. insurerbrain-module-solvency2-bs .ib-feedback {
 margin-top: 1rem;
 padding: 0.85rem 1rem;
 border-radius: var(--ib-radius);
 border-left: 4px solid transparent;
 line-height: 1.5;
 display: none;

}

  1. insurerbrain-module-solvency2-bs .ib-feedback.ib-show {
 display: block;
 animation: ibFadeIn 0.3s ease;

}

  1. insurerbrain-module-solvency2-bs .ib-feedback.ib-fb-correct {
 background: var(--ib-correct-bg);
 border-left-color: var(--ib-correct);
 color: var(--ib-correct);

}

  1. insurerbrain-module-solvency2-bs .ib-feedback.ib-fb-wrong {
 background: var(--ib-wrong-bg);
 border-left-color: var(--ib-wrong);
 color: var(--ib-wrong);

}

  1. insurerbrain-module-solvency2-bs .ib-feedback strong {
 display: block;
 margin-bottom: 0.25rem;

}

  1. insurerbrain-module-solvency2-bs .ib-feedback .ib-explanation {
 color: var(--ib-text);
 font-size: 0.92em;

}

/* ── Navigation ──────────────────────────────────────────── */

  1. insurerbrain-module-solvency2-bs .ib-nav {
 display: flex;
 justify-content: flex-end;
 gap: 0.5rem;
 margin-top: 1rem;

}

  1. insurerbrain-module-solvency2-bs .ib-btn {
 padding: 0.55rem 1.25rem;
 border: 1px solid var(--ib-accent);
 border-radius: var(--ib-radius);
 background: var(--ib-accent);
 color: #fff;
 font-size: 0.9em;
 font-weight: 600;
 cursor: pointer;
 transition: opacity var(--ib-transition);

}

  1. insurerbrain-module-solvency2-bs .ib-btn:hover {
 opacity: 0.85;

}

  1. insurerbrain-module-solvency2-bs .ib-btn:disabled {
 opacity: 0.4;
 cursor: default;

}

  1. insurerbrain-module-solvency2-bs .ib-btn-outline {
 background: transparent;
 color: var(--ib-accent);

}

/* ── Results Screen ──────────────────────────────────────── */

  1. insurerbrain-module-solvency2-bs .ib-results {
 text-align: center;
 padding: 2rem 1rem;

}

  1. insurerbrain-module-solvency2-bs .ib-score-ring {
 position: relative;
 width: 9rem;
 height: 9rem;
 margin: 0 auto 1.5rem;

}

  1. insurerbrain-module-solvency2-bs .ib-score-ring svg {
 transform: rotate(-90deg);
 width: 100%;
 height: 100%;

}

  1. insurerbrain-module-solvency2-bs .ib-score-ring circle {
 fill: none;
 stroke-width: 8;

}

  1. insurerbrain-module-solvency2-bs .ib-ring-bg {
 stroke: var(--ib-neutral-border);

}

  1. insurerbrain-module-solvency2-bs .ib-ring-fill {
 stroke: var(--ib-correct);
 stroke-linecap: round;
 stroke-dasharray: 264;
 stroke-dashoffset: 264;
 transition: stroke-dashoffset 1s ease;

}

  1. insurerbrain-module-solvency2-bs .ib-score-label {
 position: absolute;
 inset: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;

}

  1. insurerbrain-module-solvency2-bs .ib-score-pct {
 font-size: 2rem;
 font-weight: 700;
 color: var(--ib-text);

}

  1. insurerbrain-module-solvency2-bs .ib-score-sub {
 font-size: 0.85em;
 color: var(--ib-text-muted);

}

  1. insurerbrain-module-solvency2-bs .ib-results-msg {
 margin-bottom: 1.5rem;
 color: var(--ib-text-muted);
 line-height: 1.5;

}

  1. insurerbrain-module-solvency2-bs .ib-review-list {
 text-align: left;
 margin-top: 1.5rem;

}

  1. insurerbrain-module-solvency2-bs .ib-review-item {
 display: flex;
 align-items: flex-start;
 gap: 0.6rem;
 padding: 0.65rem 0;
 border-bottom: 1px solid var(--ib-neutral-border);
 font-size: 0.92em;
 line-height: 1.45;

}

  1. insurerbrain-module-solvency2-bs .ib-review-icon {
 flex-shrink: 0;
 width: 1.25rem;
 height: 1.25rem;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.7em;
 font-weight: 700;
 color: #fff;
 margin-top: 0.15rem;

}

  1. insurerbrain-module-solvency2-bs .ib-review-icon.ib-ri-correct {
 background: var(--ib-correct);

}

  1. insurerbrain-module-solvency2-bs .ib-review-icon.ib-ri-wrong {
 background: var(--ib-wrong);

}

/* ── Animation ───────────────────────────────────────────── */ @keyframes ibFadeIn { 

 from { opacity: 0; transform: translateY(6px); }
 to { opacity: 1; transform: translateY(0); }

}

  1. insurerbrain-module-solvency2-bs .ib-animate-in {
 animation: ibFadeIn 0.3s ease;

}

/* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 480px) { 

 #insurerbrain-module-solvency2-bs .ib-card {
   padding: 1rem;
 }
 #insurerbrain-module-solvency2-bs .ib-option {
   padding: 0.6rem 0.75rem;
 }
 #insurerbrain-module-solvency2-bs .ib-q-topic {
   display: none;
 }

} </style> 

 Question 1 / 10

 <button class="ib-btn ib-btn-outline" id="ib-s2-btn-restart" style="display:none;">Restart</button>
 <button class="ib-btn" id="ib-s2-btn-next" disabled>Next →</button>

<script> (function() { 

 /* ── Question Bank ───────────────────────────────────── */
 var questions = [
   {
     topic: "Valuation",
     text: "Under Solvency II, how must an insurer's assets be valued on the economic balance sheet?",
     options: [
       "At historical cost, consistent with IFRS 9",
       "At market-consistent (fair) value, using quoted market prices where available",
       "At the lower of cost and net realisable value",
       "At amortised cost with an impairment overlay"
     ],
     answer: 1,
     explanation: "Solvency II requires a market-consistent valuation framework. Assets must be valued at the amount for which they could be exchanged between knowledgeable, willing parties in an arm's-length transaction — effectively fair value, with quoted market prices used where an active market exists."
   },
   {
     topic: "Technical Provisions",
     text: "Technical provisions under Solvency II are equal to the sum of which two components?",
     options: [
       "Unearned Premium Reserve + Claims Outstanding Reserve",
       "Best Estimate Liability (BEL) + Risk Margin",
       "Solvency Capital Requirement + Risk Margin",
       "Best Estimate Liability (BEL) + Matching Adjustment"
     ],
     answer: 1,
     explanation: "Article 77 of the Solvency II Directive defines technical provisions as the sum of the Best Estimate Liability (BEL) — a probability-weighted average of future cash flows discounted using the risk-free rate term structure — and the Risk Margin, which represents the cost of holding capital to run off the obligations."
   },
   {
     topic: "Risk Margin",
     text: "What does the Risk Margin in Solvency II conceptually represent?",
     options: [
       "A buffer to protect against adverse reserve development",
       "The cost-of-capital that a reference undertaking would require to take over and run off the insurance obligations",
       "A regulatory add-on calibrated at the 99.5% VaR over one year",
       "The expected profit embedded in future premiums"
     ],
     answer: 1,
     explanation: "The Risk Margin is calculated using a cost-of-capital approach. It represents the cost a hypothetical reference undertaking would charge — above the Best Estimate — for holding the Solvency Capital Requirement needed to support the obligations until they are fully run off."
   },
   {
     topic: "Discount Rate",
     text: "Which rate curve is prescribed for discounting the Best Estimate Liability under Solvency II?",
     options: [
       "The insurer's own investment return assumptions",
       "Government bond yields of the currency of the obligation",
       "The risk-free interest rate term structure published by EIOPA",
       "The swap rate plus a fixed credit spread"
     ],
     answer: 2,
     explanation: "EIOPA publishes the relevant risk-free interest rate term structure each month. It is derived primarily from swap rates, adjusted to remove the credit risk component (Credit Risk Adjustment), and extrapolated beyond the Last Liquid Point toward an Ultimate Forward Rate."
   },
   {
     topic: "Own Funds",
     text: "Under Solvency II, 'Own Funds' that can cover the SCR are classified into how many quality tiers?",
     options: [
       "Two tiers",
       "Three tiers",
       "Four tiers",
       "Five tiers"
     ],
     answer: 1,
     explanation: "Own Funds are classified into three tiers based on their quality — primarily their permanence and loss-absorption capacity. Tier 1 is the highest quality (e.g. ordinary share capital, retained earnings), Tier 2 includes items like subordinated liabilities, and Tier 3 captures lower-quality items such as net deferred tax assets."
   },
   {
     topic: "SCR",
     text: "The Solvency Capital Requirement (SCR) under the Standard Formula is calibrated to which confidence level over which time horizon?",
     options: [
       "95.0% Value-at-Risk over a one-year period",
       "99.0% Value-at-Risk over a run-off period",
       "99.5% Value-at-Risk over a one-year period",
       "99.5% Tail Value-at-Risk over a one-year period"
     ],
     answer: 2,
     explanation: "The SCR corresponds to the Value-at-Risk of Basic Own Funds at a 99.5% confidence level over a one-year time horizon. This means the insurer should hold enough capital to survive a 1-in-200 year loss event."
   },
   {
     topic: "MCR",
     text: "What happens if an insurer's eligible Own Funds fall below the Minimum Capital Requirement (MCR)?",
     options: [
       "The insurer must submit a revised ORSA within 30 days",
       "The supervisor may ultimately withdraw the insurer's authorisation",
       "The insurer is placed into an automatic run-off of all existing policies",
       "A mandatory dividend suspension is triggered but operations continue"
     ],
     answer: 1,
     explanation: "Breaching the MCR represents the most severe regulatory threshold under Solvency II. If an insurer fails to restore Own Funds above the MCR within a short recovery period, the supervisory authority has the power to withdraw the firm's authorisation to write new business."
   },
   {
     topic: "Balance Sheet",
     text: "On the Solvency II balance sheet, the excess of assets over liabilities represents which of the following?",
     options: [
       "The Solvency Capital Requirement",
       "The Basic Own Funds",
       "The Risk Margin",
       "The Free Surplus"
     ],
     answer: 1,
     explanation: "The difference between the market-consistent value of assets and the total of technical provisions plus other liabilities equals the Basic Own Funds. When combined with any Ancillary Own Funds (off-balance-sheet items approved by the supervisor), this gives the total Own Funds available to meet capital requirements."
   },
   {
     topic: "Volatility Adjustment",
     text: "What is the primary purpose of the Volatility Adjustment (VA) under Solvency II?",
     options: [
       "To reflect the insurer's superior asset management skills",
       "To mitigate the effect of exaggerated bond spreads on the valuation of insurance liabilities",
       "To increase the SCR during periods of market stress",
       "To accelerate the convergence of the discount curve to the Ultimate Forward Rate"
     ],
     answer: 1,
     explanation: "The Volatility Adjustment is added to the risk-free rate curve to prevent artificial balance-sheet volatility when credit spreads widen beyond levels justified by fundamental default risk. It is particularly relevant for insurers that hold bonds to maturity and whose liabilities are not sensitive to short-term spread movements."
   },
   {
     topic: "Matching Adjustment",
     text: "Which condition must be satisfied for an insurer to apply the Matching Adjustment to its discount rate?",
     options: [
       "The insurer must use an internal model approved by the supervisor",
       "The portfolio of assets must be ring-fenced and assigned to a portfolio of obligations with predictable cash flows",
       "The insurer must demonstrate a Solvency Ratio above 150%",
       "The insurer must exclusively write long-term life business"
     ],
     answer: 1,
     explanation: "The Matching Adjustment may be applied when the insurer holds a ring-fenced, assigned portfolio of assets whose cash flows replicate the expected cash flows of the matched liabilities. The obligations must have predictable cash flows (e.g. annuities), and the asset portfolio must be managed separately from other business."
   }
 ];

 /* ── State ───────────────────────────────────────────── */
 var root = document.getElementById('insurerbrain-module-solvency2-bs');
 var qArea = root.querySelector('#ib-s2-question-area');
 var progText = root.querySelector('#ib-s2-progress-text');
 var progBar = root.querySelector('#ib-s2-progress-bar');
 var navEl = root.querySelector('#ib-s2-nav');
 var btnNext = root.querySelector('#ib-s2-btn-next');
 var btnRestart = root.querySelector('#ib-s2-btn-restart');
 var resultsEl = root.querySelector('#ib-s2-results');
 var currentQ = 0;
 var score = 0;
 var answered = false;
 var userAnswers = [];

 /* ── Render Question ─────────────────────────────────── */
 function renderQuestion() {
   var q = questions[currentQ];
   var keys = ['A', 'B', 'C', 'D'];
   answered = false;
   btnNext.disabled = true;
   btnNext.textContent = currentQ < questions.length - 1 ? 'Next \u2192' : 'See Results';
   progText.textContent = 'Question ' + (currentQ + 1) + ' / ' + questions.length;
   progBar.style.width = ((currentQ) / questions.length * 100) + '%';
var html = '
'; html += '
'; 
   html += '' + (currentQ + 1) + '';
   html += '' + q.topic + '';
html += '
'; html += '
' + q.text + '
'; html += '
'; 
   for (var i = 0; i < q.options.length; i++) {
html += '
'; 
     html += '' + keys[i] + '';
     html += '' + q.options[i] + '';
html += '
'; 
   }
html += '
'; html += '
'; html += '
'; 
   qArea.innerHTML = html;

   var opts = qArea.querySelectorAll('.ib-option');
   for (var j = 0; j < opts.length; j++) {
     opts[j].addEventListener('click', handleOptionClick);
     opts[j].addEventListener('keydown', function(e) {
       if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleOptionClick.call(this, e); }
     });
   }
 }

 /* ── Handle Answer ───────────────────────────────────── */
 function handleOptionClick() {
   if (answered) return;
   answered = true;
   var idx = parseInt(this.getAttribute('data-idx'), 10);
   var q = questions[currentQ];
   var isCorrect = idx === q.answer;
   if (isCorrect) score++;
   userAnswers.push({ qIndex: currentQ, chosen: idx, correct: isCorrect });

   var opts = qArea.querySelectorAll('.ib-option');
   for (var k = 0; k < opts.length; k++) {
     opts[k].classList.add('ib-disabled');
     if (parseInt(opts[k].getAttribute('data-idx'), 10) === q.answer) {
       opts[k].classList.add('ib-correct-answer');
     }
     if (parseInt(opts[k].getAttribute('data-idx'), 10) === idx && !isCorrect) {
       opts[k].classList.add('ib-wrong-answer');
     }
   }

   var fb = qArea.querySelector('#ib-s2-feedback');
   fb.className = 'ib-feedback ib-show ' + (isCorrect ? 'ib-fb-correct' : 'ib-fb-wrong');
   fb.innerHTML = '' + (isCorrect ? '\u2713 Correct' : '\u2717 Incorrect') + ''
     + '' + q.explanation + '';

   btnNext.disabled = false;
 }

 /* ── Show Results ────────────────────────────────────── */
 function showResults() {
   progBar.style.width = '100%';
   progText.textContent = 'Completed';
   qArea.style.display = 'none';
   navEl.style.display = 'none';
   resultsEl.style.display = 'block';

   var pct = Math.round((score / questions.length) * 100);
   var circumference = 2 * Math.PI * 42; // r=42
   var msg = pct >= 80 ? 'Excellent — you have a strong grasp of the Solvency II balance sheet.'
           : pct >= 50 ? 'Good effort. Review the explanations below to strengthen weaker areas.'
           : 'Keep studying. The Solvency II economic balance sheet has many nuances worth revisiting.';
var html = '
'; html += '
'; 
   html += '<svg viewBox="0 0 100 100"><circle class="ib-ring-bg" cx="50" cy="50" r="42"/>';
   html += '<circle class="ib-ring-fill" id="ib-s2-ring" cx="50" cy="50" r="42"/></svg>';
html += '
' + pct + '%'; html += '' + score + ' / ' + questions.length + '
'; html += '
'; html += '
' + msg + '
'; html += '
'; 
   for (var i = 0; i < userAnswers.length; i++) {
     var ua = userAnswers[i];
     var q = questions[ua.qIndex];
html += '
'; 
     html += ''
           + (ua.correct ? '\u2713' : '\u2717') + '';
     html += '' + q.text + '';
html += '
'; 
   }
html += '
'; html += '
'; 
   html += '<button class="ib-btn" id="ib-s2-btn-retry">Retake Quiz</button>';
html += '
'; html += '
'; 
   resultsEl.innerHTML = html;

   // Animate ring
   setTimeout(function() {
     var ring = root.querySelector('#ib-s2-ring');
     if (ring) {
       ring.style.strokeDashoffset = circumference - (circumference * pct / 100);
     }
   }, 60);

   var retryBtn = resultsEl.querySelector('#ib-s2-btn-retry');
   if (retryBtn) retryBtn.addEventListener('click', resetQuiz);
 }

 /* ── Reset ───────────────────────────────────────────── */
 function resetQuiz() {
   currentQ = 0;
   score = 0;
   answered = false;
   userAnswers = [];
   resultsEl.style.display = 'none';
   resultsEl.innerHTML = ;
   qArea.style.display = 'block';
   navEl.style.display = 'flex';
   btnRestart.style.display = 'none';
   renderQuestion();
 }

 /* ── Next Button ─────────────────────────────────────── */
 btnNext.addEventListener('click', function() {
   if (!answered) return;
   currentQ++;
   if (currentQ >= questions.length) {
     showResults();
   } else {
     renderQuestion();
   }
 });

 btnRestart.addEventListener('click', resetQuiz);

 /* ── Init ─────────────────────────────────────────────── */
 renderQuestion();

})(); </script>

Retrieved from "https://www.insurerbrain.com/w/index.php?title=Widget:Solvency2_BalanceSheet&oldid=22523"