Primer

HTML

<div class="quiz-dashboard quiz-dashboard--stage-1 quiz-dashboard--totaliser quiz-dashboard--totaliser-center" style="position: relative">>
	<div class="totaliser-container">
		<div class="totaliser-intro">Total number of Quizzers:</div>
<!-- 		<div class="totaliser-total">16520</div>
 -->		<div class="zero-counter totaliser-total" data-from="0" data-to="16520">
			<span class="zero-counter__value">16520</span>
		</div>
		<picture class="totaliser-dinosaur">
			<source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/Totaliser_Dinosaur.png, /images/mainsite5/big-quiz-night/Totaliser_Dinosaur@2x.png 2x">
			<img src="/images/mainsite5/big-quiz-night/Totaliser_Dinosaur.png" alt="Totaliser Dinosaur" title="Totaliser Dinosaur">
		</picture>
	</div>
</div>

<div class="quiz-dashboard quiz-dashboard--stage-2 quiz-dashboard--churches quiz-dashboard--totaliser-center">
	<div class="totaliser-container">
		<div class="large-col-6">
			<div>
				<div class="totaliser-intro">Total number of churches:</div>
		<!-- 		<div class="totaliser-total">16520</div>
		 -->		<div class="zero-counter totaliser-total" data-from="0" data-to="720">
					<span class="zero-counter__value">720</span>
				</div>
			</div>
		</div>
		<div class="large-col-6">
			<img src="/images/mainsite5/big-quiz-night/map.png" alt="Totaliser Dinosaur" title="Totaliser Dinosaur">
		</div>
	</div>
</div>

<div class="quiz-dashboard quiz-dashboard--stage-3 quiz-dashboard--totaliser quiz-dashboard--totaliser-thankyou quiz-dashboard--totaliser-center">
	<div class="totaliser-container">
		<picture class="totaliser-plane">
			<source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/Stage3b_Plane.png, /images/mainsite5/big-quiz-night/Stage3b_Plane@2x.png 2x">
			<img src="/images/mainsite5/big-quiz-night/Stage3b_Plane.png" alt="Thank you" title="Thank you">
		</picture>
		<div class="totaliser-thankyou">Thank You</div>
		<div class="totaliser-intro">for being part of The Big Quiz Night</div>
		<picture class="totaliser-logo">
			<source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/tflogo.png, /images/mainsite5/big-quiz-night/tflogo@2x.png 2x">
			<img src="/images/mainsite5/big-quiz-night/tflogo.png" alt="Totaliser Dinosaur" title="Totaliser Dinosaur">
		</picture>
	</div>
</div>

Twig

<div class="quiz-dashboard quiz-dashboard--stage-1 quiz-dashboard--totaliser quiz-dashboard--totaliser-center" style="position: relative">>
	<div class="totaliser-container">
		<div class="totaliser-intro">Total number of Quizzers:</div>
<!-- 		<div class="totaliser-total">{{ total }}</div>
 -->		<div class="zero-counter totaliser-total" data-from="0" data-to="{{ total }}">
			<span class="zero-counter__value">{{ total }}</span>
		</div>
		<picture class="totaliser-dinosaur">
			<source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/Totaliser_Dinosaur.png, /images/mainsite5/big-quiz-night/Totaliser_Dinosaur@2x.png 2x">
			<img src="/images/mainsite5/big-quiz-night/Totaliser_Dinosaur.png" alt="Totaliser Dinosaur" title="Totaliser Dinosaur">
		</picture>
	</div>
</div>

<div class="quiz-dashboard quiz-dashboard--stage-2 quiz-dashboard--churches quiz-dashboard--totaliser-center">
	<div class="totaliser-container">
		<div class="large-col-6">
			<div>
				<div class="totaliser-intro">Total number of churches:</div>
		<!-- 		<div class="totaliser-total">{{ total }}</div>
		 -->		<div class="zero-counter totaliser-total" data-from="0" data-to="{{ church_total }}">
					<span class="zero-counter__value">{{ church_total }}</span>
				</div>
			</div>
		</div>
		<div class="large-col-6">
			<img src="/images/mainsite5/big-quiz-night/map.png" alt="Totaliser Dinosaur" title="Totaliser Dinosaur">
		</div>
	</div>
</div>

<div class="quiz-dashboard quiz-dashboard--stage-3 quiz-dashboard--totaliser quiz-dashboard--totaliser-thankyou quiz-dashboard--totaliser-center">
	<div class="totaliser-container">
		<picture class="totaliser-plane">
			<source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/Stage3b_Plane.png, /images/mainsite5/big-quiz-night/Stage3b_Plane@2x.png 2x">
			<img src="/images/mainsite5/big-quiz-night/Stage3b_Plane.png" alt="Thank you" title="Thank you">
		</picture>
		<div class="totaliser-thankyou">Thank You</div>
		<div class="totaliser-intro">for being part of The Big Quiz Night</div>
		<picture class="totaliser-logo">
			<source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/tflogo.png, /images/mainsite5/big-quiz-night/tflogo@2x.png 2x">
			<img src="/images/mainsite5/big-quiz-night/tflogo.png" alt="Totaliser Dinosaur" title="Totaliser Dinosaur">
		</picture>
	</div>
</div>

{
    "total": "16520",
    "church_total": "720"
}

Total number of Quizzers:

16520

Total number of churches:

720

Thank You

for being part of The Big Quiz Night