From dd9624522dfc1a24c08b95b762847761e4ce0cb2 Mon Sep 17 00:00:00 2001
From: victor <doc999tor@gmail.com>
Date: Sun, 14 Apr 2019 19:09:03 +0300
Subject: [PATCH 01/30] poll new ui

---
 html/index.html                               | 147 ++++++++++--------
 images/ic-back.svg                            |   8 +
 images/kin-coin.svg                           |   8 +
 scripts/src/ui/page/multichoice.question.tsx  |  10 +-
 .../ui/page/timed.multichoice.question.tsx    |   2 +-
 styles/src/app.styl                           |  31 ++--
 styles/src/common.styl                        |  93 +++++------
 styles/src/page/base.styl                     |  30 ++--
 styles/src/page/multichoice.question.styl     |  99 +++++++-----
 9 files changed, 248 insertions(+), 180 deletions(-)
 create mode 100644 images/ic-back.svg
 create mode 100644 images/kin-coin.svg
diff --git a/html/index.html b/html/index.html
index 37b236b..ba295b3 100644
--- a/html/index.html
+++ b/html/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
     <script>
 
 		(function (PageType) {
@@ -63,24 +64,38 @@
 							// },
 							//
 							//*** Poll ***//
-							// {
-							// 	type: PageType.FullPageMultiChoice,
-							// 	title: "Who do you primarily chat with on Kik?",
-							// 	description: "Finish the poll to earn <span style='color:#047cfc;'>6,000</span> Kin",
-							// 	question: {
-							// 		id: "G@#$",
-							// 		answers: [
-							// 			"New friends I’ve met on Kik",
-							// 			"Friends I’ve met elsewhere online",
-							// 			"Friends I know from real life",
-							// 			"An equal mix of all three!",
-							// 		],
-							// 	},
-							// },
-							// {
-							// 	type: PageType.EarnThankYou,
-							// 	description: "4,500"
-							// },
+							{
+								type: PageType.FullPageMultiChoice,
+								title: "Who do you primarily chat with on Kik?",
+								description: "Finish the poll to earn <span class='description-price'>+<img src='images/kin-coin.svg'>6,000</span>",
+								question: {
+									id: "G@#$",
+									answers: [
+										"New friends I’ve met on Kik",
+										"Friends I’ve met elsewhere online",
+										"Friends I know from real life",
+										"An equal mix of all three!",
+									],
+								},
+							},
+							{
+								type: PageType.FullPageMultiChoice,
+								title: "Who do you primarily chat with on Kik?",
+								description: "Finish the poll to earn <span class='description-price'>+<img src='images/kin-coin.svg'>6,000</span>",
+								question: {
+									id: "G@#$",
+									answers: [
+										"New friends I’ve met on Kik",
+										"Friends I’ve met elsewhere online",
+										"Friends I know from real life",
+										"An equal mix of all three!",
+									],
+								},
+							},
+							{
+								type: PageType.EarnThankYou,
+								description: "4,500"
+							},
 
 							//*** Quiz ***//
 							// {
@@ -98,54 +113,54 @@
 							// 		],
 							// 	},
 							// },
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								description: "How much wood could a woodchuck chuck?",
-								amount: 15,
-								rightAnswer: 2,
-								question: {
-									id: "question-1",
-									answers: [
-										"Not a lot, they are very small",
-										"A woodchuck would chuck as much wood as a woodchuck could chuck",
-										"320 kg",
-										"361.9237001 cm3",
-									],
-								},
-							},
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								description: "Yes?",
-								amount: 20,
-								rightAnswer: 3,
-								question: {
-									id: "question-2",
-									answers: [
-										"Of course",
-										"no",
-										"320 kg",
-										"Camel",
-									],
-								},
-							},
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								description: "Color?",
-								amount: 15,
-								rightAnswer: 4,
-								question: {
-									id: "question-3",
-									answers: [
-										"Yellow",
-										"Red",
-										"Crimson",
-										"Dorothy",
-									],
-								},
-							},
-							{
-								type: PageType.SuccessBasedThankYou,
-							},
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	description: "How much wood could a woodchuck chuck?",
+							// 	amount: 15,
+							// 	rightAnswer: 2,
+							// 	question: {
+							// 		id: "question-1",
+							// 		answers: [
+							// 			"Not a lot, they are very small",
+							// 			"A woodchuck would chuck as much wood as a woodchuck could chuck",
+							// 			"320 kg",
+							// 			"361.9237001 cm3",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	description: "Yes?",
+							// 	amount: 20,
+							// 	rightAnswer: 3,
+							// 	question: {
+							// 		id: "question-2",
+							// 		answers: [
+							// 			"Of course",
+							// 			"no",
+							// 			"320 kg",
+							// 			"Camel",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	description: "Color?",
+							// 	amount: 15,
+							// 	rightAnswer: 4,
+							// 	question: {
+							// 		id: "question-3",
+							// 		answers: [
+							// 			"Yellow",
+							// 			"Red",
+							// 			"Crimson",
+							// 			"Dorothy",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.SuccessBasedThankYou,
+							// },
 						]
 					}
 				}
diff --git a/images/ic-back.svg b/images/ic-back.svg
new file mode 100644
index 0000000..442202f
--- /dev/null
+++ b/images/ic-back.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25">
+    <g fill="none" fill-rule="evenodd">
+        <!-- <path fill="#FFF" d="M-12-40h360v640H-12z"/> -->
+        <path fill="#1F1F1F" fill-rule="nonzero" d="M-12-16h360v568H-12z"/>
+        <path fill="#FFF" d="M4 12.65l8 8.1 1.414-1.432-5.586-5.655H20v-2.025H7.828l5.586-5.656L12 4.55l-8 8.1z"/>
+        <path fill="#A6A6A6" d="M4 12.65l8 8.1 1.414-1.432-5.586-5.656H20v-2.025H7.828l5.586-5.655L12 4.55l-8 8.1z"/>
+    </g>
+</svg>
diff --git a/images/kin-coin.svg b/images/kin-coin.svg
new file mode 100644
index 0000000..bd087f2
--- /dev/null
+++ b/images/kin-coin.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6">
+    <g fill="#6F41E8" fill-rule="evenodd">
+        <text font-family="Sailec-Medium, Sailec" font-size="14" font-weight="400" transform="translate(-9 -13)">
+            <tspan x="0" y="11">+ 30</tspan>
+        </text>
+        <path d="M5.446 2.009A.548.548 0 0 0 6 1.467V0H4.473a.548.548 0 0 0-.554.542v.482c0 .544-.423 1.012-.979 1.012s-1.035-.468-1.035-1.012V.522A.528.528 0 0 0 1.37 0H0v6h1.36a.54.54 0 0 0 .545-.533v-.452c0-.573.432-1.054.989-1.054.556.002 1.025.46 1.025 1.005v.496c0 .297.246.538.55.538H6V4.517a.544.544 0 0 0-.55-.538h-.457c-.557 0-1.074-.441-1.074-.985a1 1 0 0 1 1.01-.985h.517z"/>
+    </g>
+</svg>
diff --git a/scripts/src/ui/page/multichoice.question.tsx b/scripts/src/ui/page/multichoice.question.tsx
index fd6d4e9..9c1d666 100644
--- a/scripts/src/ui/page/multichoice.question.tsx
+++ b/scripts/src/ui/page/multichoice.question.tsx
@@ -52,9 +52,17 @@ export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMu
 	}
 
 	protected getHeader() {
+		const currentPage = this.props.pageIndex + 1;
+		/* the list is 0 based */
+		const totalQuestionPages = this.props.totalPagesCount - 1;
+		/* the list contains a Thank you page --- a better solution is better */
 		return (
 			<React.Fragment>
-				<div className="title">{this.props.title}</div>
+				<div className="header-controls">
+					<button className="back-nav"><img src="images/ic-back.svg" /></button>
+					<span className="title">{this.props.title}</span>
+					<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
+				</div>
 				<div className="description" dangerouslySetInnerHTML={{ __html: this.props && this.props.description! }}/>
 			</React.Fragment>
 		);
diff --git a/scripts/src/ui/page/timed.multichoice.question.tsx b/scripts/src/ui/page/timed.multichoice.question.tsx
index 1b8400d..f83e222 100644
--- a/scripts/src/ui/page/timed.multichoice.question.tsx
+++ b/scripts/src/ui/page/timed.multichoice.question.tsx
@@ -40,7 +40,7 @@ class Timer extends React.Component<TimerProps, TimerState> {
 	}
 
 	public componentDidMount() {  // First timer won't get componentDidUpdate
-		setTimeout(this.updateTime, 1000);
+		// setTimeout(this.updateTime, 1000);
 	}
 
 	private updateTime() {
diff --git a/styles/src/app.styl b/styles/src/app.styl
index 1f9a21b..35f3784 100644
--- a/styles/src/app.styl
+++ b/styles/src/app.styl
@@ -1,13 +1,18 @@
-html, body, #root, .app,  .slider-wrapper, .slider-wrapper .slider.animated
-	width: 100%
-	height: 100%
-	padding: 0
-	margin: 0
-
-.carouselWrapper, .react-swipeable-view-container
-	width: 100%
-	height: 100%
-
-.react-swipeable-view-container > div
-	position relative
-
+html, body, #root, .app,  .slider-wrapper, .slider-wrapper .slider.animated
+	width: 100%
+	height: 100%
+	padding: 0
+	margin: 0
+	text-align: center
+
+.app
+	background-color #1f1f1f
+	color: #fff
+
+.carouselWrapper, .react-swipeable-view-container
+	width: 100%
+	height: 100%
+
+.react-swipeable-view-container > div
+	position relative
+
diff --git a/styles/src/common.styl b/styles/src/common.styl
index 16dfd0d..1210834 100644
--- a/styles/src/common.styl
+++ b/styles/src/common.styl
@@ -1,45 +1,48 @@
-/*** Colors ***/
-$deep-sky-blue = #047cfc
-$blue-grey = #7884a5
-$bright-sky-blue = #08c6f1
-$bright-blue = #0262ff
-$green-blue = #00d093
-$watermelon = #ff4b67
-
-/*** Mixins ***/
-flex-box($direction = row, $justify = flex-start, $align = stretch)
-	// $align only supports stretch and center
-	// $direction only supports row and column
-	display: -webkit-box
-	display: -webkit-flex
-	display: flex
-	-webkit-justify-content: $justify
-	justify-content: $justify
-	-webkit-flex-direction: $direction
-	flex-direction: $direction
-	-webkit-align-items: $align
-	align-items: $align
-
-font-roboto()
-	font-family: 'Roboto', 'San Francisco', sans-serif
-	font-weight: normal
-	font-style: normal
-	font-stretch: normal
-	line-height: normal
-
-btn()
-	border-radius: 60px
-	width: 80vw
-	height: 11.7vw
-	padding: 2vw
-	font-size: 4.2vw
-	border: solid 1px #7884a5
-	outline none
-
-btn-active()
-	background-color: #047cfc
-	border-color: #047cfc
-	color white
-
-.hidden
-	display: none
+/*** Colors ***/
+$deep-sky-blue = #047cfc
+$blue-grey = #7884a5
+$bright-sky-blue = #08c6f1
+$bright-blue = #0262ff
+$green-blue = #00d093
+$watermelon = #ff4b67
+$kin-purple = #6F41E8;
+
+/*** Mixins ***/
+flex-box($direction = row, $justify = flex-start, $align = stretch)
+	// $align only supports stretch and center
+	// $direction only supports row and column
+	display: -webkit-box
+	display: -webkit-flex
+	display: flex
+	-webkit-justify-content: $justify
+	justify-content: $justify
+	-webkit-flex-direction: $direction
+	flex-direction: $direction
+	-webkit-align-items: $align
+	align-items: $align
+
+font-roboto()
+	font-family: 'Roboto', 'San Francisco', sans-serif
+	font-weight: normal
+	font-style: normal
+	font-stretch: normal
+	line-height: normal
+
+btn()
+	border-radius: 5px
+	width: 86vw
+	height: 15vw
+	font-size: 4.2vw
+	border: solid 1px #3d3d3d
+	outline none
+
+btn-active()
+	background-color: $kin-purple
+	color white
+
+.hidden
+	display: none
+
+.kin-purple
+	color: $kin-purple;
+
diff --git a/styles/src/page/base.styl b/styles/src/page/base.styl
index 8ccfbef..800e0d8 100644
--- a/styles/src/page/base.styl
+++ b/styles/src/page/base.styl
@@ -1,15 +1,15 @@
-.page-container
-	width: 100%
-	height: 100%
-	padding: 0
-	margin: 0
-	.page
-		width: 100%
-		height: 100%
-		margin: 0
-		position relative
-		.header
-			border: none
-			border-bottom: solid 1px #d7dce9
-			flex-box(column)
-
+.page-container
+	width: 100%
+	height: 100%
+	padding: 0
+	margin: 0
+	.page
+		width: 100%
+		height: 100%
+		margin: 0
+		position relative
+		.header
+			border: none
+			border-bottom: solid 1px #d7dce9
+			flex-box(column)
+
diff --git a/styles/src/page/multichoice.question.styl b/styles/src/page/multichoice.question.styl
index 89cab24..89cccd2 100644
--- a/styles/src/page/multichoice.question.styl
+++ b/styles/src/page/multichoice.question.styl
@@ -1,39 +1,60 @@
-@require "../common.styl"
-
-.page.question.multichoice
-	width: 100%
-	font-roboto()
-	.header
-		.title
-			text-align: center
-			width: 72vw
-			font-size: 6.2vw
-			letter-spacing: -0.5px
-			color: #047cfc
-			margin: 10% auto 1%
-
-		.description
-			text-align: center
-			margin: 3vh auto
-			color: #7884a5
-			font-size: 3.5vw
-
-	.choices
-		margin: 6% auto 0
-		flex-box(column)
-	.choice
-		position relative
-		btn()
-		margin: 5% 11%
-		background: white
-		color: #7884a5
-		outline none
-		&.rightAnswer
-			btn-active()
-		&.wrongAnswer
-			border solid 3px $watermelon
-	&:not(.highlightRightWrong)
-		.choices
-			.choice
-				&.selected
-					btn-active()
+@require "../common.styl"
+
+.page.question.multichoice
+	width: 100%
+	font-roboto()
+	.header
+		width: 86%
+		margin: 10% auto 0
+		.header-controls
+			flex-box()
+			justify-content: space-between
+			align-items: flex-start
+			font-size: 6.2vw
+		.title
+			width: 72vw
+			margin: 0 auto 8%
+		button.back-nav
+			-webkit-appearance: none
+			border: none
+			background: none
+			padding: 0
+			img
+				width: 2rem
+
+		.description
+			margin: 3vh auto
+			font-size: 4.2vw
+			.description-price
+				display: -webkit-inline-flex
+				display: -moz-inline-flex
+				display: -ms-inline-flex
+				display: -o-inline-flex
+				display: inline-flex
+				align-items: center
+				vertical-align: middle
+				color: $kin-purple
+
+				img
+					width: 6px
+					margin: 0 3px
+
+	.choices
+		margin: 6% auto 0
+		flex-box(column)
+	.choice
+		position relative
+		btn()
+		margin: 5% auto
+		background: inherit
+		color: currentColor
+		outline none
+		&.rightAnswer
+			btn-active()
+		&.wrongAnswer
+			border solid 3px $watermelon
+	&:not(.highlightRightWrong)
+		.choices
+			.choice
+				&.selected
+					btn-active()

From 248d27d465cc8aa1bfb8e6350094a66e33733aa6 Mon Sep 17 00:00:00 2001
From: victor <doc999tor@gmail.com>
Date: Mon, 15 Apr 2019 16:52:47 +0300
Subject: [PATCH 02/30] added navigate back functionality

---
 scripts/src/app.tsx                          | 44 +++++++++++++++-----
 scripts/src/ui/page/multichoice.question.tsx |  2 +-
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/scripts/src/app.tsx b/scripts/src/app.tsx
index ccc2609..15655af 100644
--- a/scripts/src/app.tsx
+++ b/scripts/src/app.tsx
@@ -48,6 +48,7 @@ export interface CommonProps {
 	currentPage: number;
 	sharedData: SharedData;
 	updateSharedDate(data: any): void;
+	navigateBack(): void;
 }
 
 const sharedPageData = {};
@@ -99,25 +100,40 @@ class App extends React.Component {
 	}
 
 	private onPageCompleteHandler(answerData: any) {
-		const allData: any = Object.assign({}, this.state.data, answerData);  // todo pollyfill Object.assign
-		const newPageIndex = this.state.currentPage + 1;
+		this.setState(Object.assign(this.state, {
+			data: Object.assign(this.state.data, answerData),
+		}));
+
+		this.navigate(+1);
+	}
+
+	private navigateBack () {
+		this.navigate(-1);
+	}
+
+	private navigate (pageStep: number) {
+		const newPageIndex = this.state.currentPage + pageStep;
 		const isComplete = this.state.currentPage === (this.state.pages.length - 1);
+		const isShouldExit = newPageIndex < 0;
 		console.log("current: %s, new page: %s, isComplete: %s", this.state.currentPage, newPageIndex, isComplete);
-
 		if (isComplete) {
-			if (Object.keys(allData)) {
-				console.log("submit " + JSON.stringify(allData));
-				bridge.submitResult(allData);
+			if (Object.keys(this.state.data)) {
+				console.log("submit " + JSON.stringify(this.state.data));
+				bridge.submitResult(this.state.data);
 				bridge.close();
 			}
 			return;
 		}
 
-		this.setState({
+		if (isShouldExit) {
+			console.log("exit " + JSON.stringify(this.state.data));
+			bridge.close();
+			return;
+		}
+
+		this.setState(Object.assign(this.state, {
 			currentPage: newPageIndex,
-			data: allData,
-			isComplete,
-		});
+		}));
 	}
 
 	private updateSharedData(data: any) {
@@ -137,11 +153,17 @@ class App extends React.Component {
 				currentPage: this.state.currentPage,
 				sharedData: sharedPageData,
 				updateSharedDate: this.updateSharedData,
+				navigateBack: this.navigateBack,
 			};
 
 			switch (page.type) {
 				case PageType.FullPageMultiChoice:
-					return <MultichoiceQuestion {...commonProps} choices={page.question.choices} description={page.description} onSelected={this.onPageCompleteHandler} rightAnswer={page.rightAnswer}/>;
+					return <MultichoiceQuestion
+						{...commonProps}
+						choices={page.question.choices}
+						description={page.description}
+						onSelected={this.onPageCompleteHandler}
+						rightAnswer={page.rightAnswer}/>;
 				case PageType.ImageAndText:
 					return <ImageAndTextPage {...commonProps} image={page.image} footerHtml={page.footerHtml} bodyHtml={page.bodyHtml} buttonText={page.buttonText} onBtnClick={this.onPageCompleteHandler}/>;
 				case PageType.EarnThankYou:
diff --git a/scripts/src/ui/page/multichoice.question.tsx b/scripts/src/ui/page/multichoice.question.tsx
index 9c1d666..08b193b 100644
--- a/scripts/src/ui/page/multichoice.question.tsx
+++ b/scripts/src/ui/page/multichoice.question.tsx
@@ -59,7 +59,7 @@ export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMu
 		return (
 			<React.Fragment>
 				<div className="header-controls">
-					<button className="back-nav"><img src="images/ic-back.svg" /></button>
+					<button className="back-nav" onClick={this.props.navigateBack}><img src="images/ic-back.svg" /></button>
 					<span className="title">{this.props.title}</span>
 					<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
 				</div>

From 7c51021ddbcdd5752b15eaa0fa74e667d63daaed Mon Sep 17 00:00:00 2001
From: victor <doc999tor@gmail.com>
Date: Tue, 16 Apr 2019 11:07:04 +0300
Subject: [PATCH 03/30] back image changed

---
 images/ic-back.svg | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/images/ic-back.svg b/images/ic-back.svg
index 442202f..b9f1ad8 100644
--- a/images/ic-back.svg
+++ b/images/ic-back.svg
@@ -1,8 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25">
-    <g fill="none" fill-rule="evenodd">
-        <!-- <path fill="#FFF" d="M-12-40h360v640H-12z"/> -->
-        <path fill="#1F1F1F" fill-rule="nonzero" d="M-12-16h360v568H-12z"/>
-        <path fill="#FFF" d="M4 12.65l8 8.1 1.414-1.432-5.586-5.655H20v-2.025H7.828l5.586-5.656L12 4.55l-8 8.1z"/>
-        <path fill="#A6A6A6" d="M4 12.65l8 8.1 1.414-1.432-5.586-5.656H20v-2.025H7.828l5.586-5.655L12 4.55l-8 8.1z"/>
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#A6A6A6" fill-rule="evenodd" d="M15 5.93L13.635 4.5 6 12.5l7.635 8L15 19.07 8.73 12.5z"/>
 </svg>

From f8240c5682b09270504a6915feb19f3a39b073cb Mon Sep 17 00:00:00 2001
From: victor <doc999tor@gmail.com>
Date: Tue, 16 Apr 2019 11:40:21 +0300
Subject: [PATCH 04/30] quiz ui draft

---
 html/index.html                               | 166 +++++++++---------
 scripts/src/app.tsx                           |   1 +
 .../ui/page/timed.multichoice.question.tsx    |   7 +-
 .../src/page/timed.multichoice.question.styl  |  72 ++++----
 4 files changed, 124 insertions(+), 122 deletions(-)

diff --git a/html/index.html b/html/index.html
index ba295b3..4c38e6c 100644
--- a/html/index.html
+++ b/html/index.html
@@ -64,103 +64,103 @@
 							// },
 							//
 							//*** Poll ***//
-							{
-								type: PageType.FullPageMultiChoice,
-								title: "Who do you primarily chat with on Kik?",
-								description: "Finish the poll to earn <span class='description-price'>+<img src='images/kin-coin.svg'>6,000</span>",
-								question: {
-									id: "G@#$",
-									answers: [
-										"New friends I’ve met on Kik",
-										"Friends I’ve met elsewhere online",
-										"Friends I know from real life",
-										"An equal mix of all three!",
-									],
-								},
-							},
-							{
-								type: PageType.FullPageMultiChoice,
-								title: "Who do you primarily chat with on Kik?",
-								description: "Finish the poll to earn <span class='description-price'>+<img src='images/kin-coin.svg'>6,000</span>",
-								question: {
-									id: "G@#$",
-									answers: [
-										"New friends I’ve met on Kik",
-										"Friends I’ve met elsewhere online",
-										"Friends I know from real life",
-										"An equal mix of all three!",
-									],
-								},
-							},
-							{
-								type: PageType.EarnThankYou,
-								description: "4,500"
-							},
-
-							//*** Quiz ***//
-							// {
-							// 	type: PageType.TimedFullPageMultiChoice,
-							// 	description: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
-							// 	amount: 15,
-							// 	rightAnswer: 3,
-							// 	question: {
-							// 		id: "erthwt",
-							// 		answers: [
-							// 			"Radonite",
-							// 			"Argonite",
-							// 			"Carbonite",
-							// 			"Kryptonite",
-							// 		],
-							// 	},
-							// },
 							// {
-							// 	type: PageType.TimedFullPageMultiChoice,
-							// 	description: "How much wood could a woodchuck chuck?",
-							// 	amount: 15,
-							// 	rightAnswer: 2,
+							// 	type: PageType.FullPageMultiChoice,
+							// 	title: "Who do you primarily chat with on Kik?",
+							// 	description: "Finish the poll to earn <span class='description-price'>+<img src='images/kin-coin.svg'>6,000</span>",
 							// 	question: {
-							// 		id: "question-1",
+							// 		id: "G@#$",
 							// 		answers: [
-							// 			"Not a lot, they are very small",
-							// 			"A woodchuck would chuck as much wood as a woodchuck could chuck",
-							// 			"320 kg",
-							// 			"361.9237001 cm3",
+							// 			"New friends I’ve met on Kik",
+							// 			"Friends I’ve met elsewhere online",
+							// 			"Friends I know from real life",
+							// 			"An equal mix of all three!",
 							// 		],
 							// 	},
 							// },
 							// {
-							// 	type: PageType.TimedFullPageMultiChoice,
-							// 	description: "Yes?",
-							// 	amount: 20,
-							// 	rightAnswer: 3,
+							// 	type: PageType.FullPageMultiChoice,
+							// 	title: "Who do you primarily chat with on Kik?",
+							// 	description: "Finish the poll to earn <span class='description-price'>+<img src='images/kin-coin.svg'>6,000</span>",
 							// 	question: {
-							// 		id: "question-2",
+							// 		id: "G@#$",
 							// 		answers: [
-							// 			"Of course",
-							// 			"no",
-							// 			"320 kg",
-							// 			"Camel",
+							// 			"New friends I’ve met on Kik",
+							// 			"Friends I’ve met elsewhere online",
+							// 			"Friends I know from real life",
+							// 			"An equal mix of all three!",
 							// 		],
 							// 	},
 							// },
 							// {
-							// 	type: PageType.TimedFullPageMultiChoice,
-							// 	description: "Color?",
-							// 	amount: 15,
-							// 	rightAnswer: 4,
-							// 	question: {
-							// 		id: "question-3",
-							// 		answers: [
-							// 			"Yellow",
-							// 			"Red",
-							// 			"Crimson",
-							// 			"Dorothy",
-							// 		],
-							// 	},
-							// },
-							// {
-							// 	type: PageType.SuccessBasedThankYou,
+							// 	type: PageType.EarnThankYou,
+							// 	description: "4,500"
 							// },
+
+							//*** Quiz ***//
+							{
+								type: PageType.TimedFullPageMultiChoice,
+								description: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
+								amount: 15,
+								rightAnswer: 3,
+								question: {
+									id: "erthwt",
+									answers: [
+										"Radonite",
+										"Argonite",
+										"Carbonite",
+										"Kryptonite",
+									],
+								},
+							},
+							{
+								type: PageType.TimedFullPageMultiChoice,
+								description: "How much wood could a woodchuck chuck?",
+								amount: 15,
+								rightAnswer: 2,
+								question: {
+									id: "question-1",
+									answers: [
+										"Not a lot, they are very small",
+										"A woodchuck would chuck as much wood as a woodchuck could chuck",
+										"320 kg",
+										"361.9237001 cm3",
+									],
+								},
+							},
+							{
+								type: PageType.TimedFullPageMultiChoice,
+								description: "Yes?",
+								amount: 20,
+								rightAnswer: 3,
+								question: {
+									id: "question-2",
+									answers: [
+										"Of course",
+										"no",
+										"320 kg",
+										"Camel",
+									],
+								},
+							},
+							{
+								type: PageType.TimedFullPageMultiChoice,
+								description: "Color?",
+								amount: 15,
+								rightAnswer: 4,
+								question: {
+									id: "question-3",
+									answers: [
+										"Yellow",
+										"Red",
+										"Crimson",
+										"Dorothy",
+									],
+								},
+							},
+							{
+								type: PageType.SuccessBasedThankYou,
+							},
 						]
 					}
 				}
diff --git a/scripts/src/app.tsx b/scripts/src/app.tsx
index 15655af..afdf7f1 100644
--- a/scripts/src/app.tsx
+++ b/scripts/src/app.tsx
@@ -85,6 +85,7 @@ class App extends React.Component {
 			data: {},
 		};
 		this.onPageCompleteHandler = this.onPageCompleteHandler.bind(this);
+		this.navigateBack = this.navigateBack.bind(this);
 	}
 
 	public render() {
diff --git a/scripts/src/ui/page/timed.multichoice.question.tsx b/scripts/src/ui/page/timed.multichoice.question.tsx
index f83e222..76701b4 100644
--- a/scripts/src/ui/page/timed.multichoice.question.tsx
+++ b/scripts/src/ui/page/timed.multichoice.question.tsx
@@ -67,9 +67,12 @@ class TimedMultichoiceQuestion extends MultichoiceQuestion {
 		/* the list contains a Thank you page --- a better solution is better */
 		return (
 			<React.Fragment>
+				<div className="header-controls">
+					<button className="back-nav" onClick={this.props.navigateBack}><img src="images/ic-back.svg" /></button>
+					<span className="title">{this.props.title}</span>
+					<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
+				</div>
 				<Timer parent={this.props.pageIndex} pause={!this.props.isDisplayed} time={quizTimerTime} callback={this.onSelect.bind(this, null, -1)}/>
-				<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
-				<div className="title">{this.props.title}</div>
 			</React.Fragment>
 		);
 	}
diff --git a/styles/src/page/timed.multichoice.question.styl b/styles/src/page/timed.multichoice.question.styl
index dd3f9bc..09bbc73 100644
--- a/styles/src/page/timed.multichoice.question.styl
+++ b/styles/src/page/timed.multichoice.question.styl
@@ -1,37 +1,35 @@
-@require "../common.styl"
-
-.page.question.multichoice.timed
-	.header
-		.timer
-			width: 15vw
-			font-size: 6.2vw
-			text-align: center
-			letter-spacing: -0.5px
-			margin: 10% auto 1%
-			font-roboto()
-			color: $green-blue
-			&.warn
-				color: $watermelon
-
-		.pageProgress
-			font-roboto()
-			font-weight: bold;
-			width: 12vw
-			font-size: 4.5vw
-			text-align: center
-			letter-spacing: -0.5px
-			margin: 5% auto 1%
-			color: $deep-sky-blue
-
-		.title
-			margin: 2% auto 10%
-	.choices
-		.choice
-			.receivedAmount
-				opacity 0
-				transition: all .5s ease;
-				position absolute
-				right 5vw
-			&.selected.rightAnswer
-				.receivedAmount
-					opacity 1
+@require "../common.styl"
+
+.page.question.multichoice.timed
+	.header
+		.timer
+			width: 15vw
+			font-size: 6.2vw
+			text-align: center
+			letter-spacing: -0.5px
+			margin: 10% auto 1%
+			font-roboto()
+			&.warn
+				color: $watermelon
+
+		.pageProgress
+			font-roboto()
+			font-weight: bold;
+			width: 12vw
+			font-size: 4.5vw
+			text-align: center
+			letter-spacing: -0.5px
+			margin: 5% auto 1%
+
+		.title
+			margin: 2% auto 10%
+	.choices
+		.choice
+			.receivedAmount
+				opacity 0
+				transition: all .5s ease;
+				position absolute
+				right 5vw
+			&.selected.rightAnswer
+				.receivedAmount
+					opacity 1

From a9507f7f2ee885ac62c3fa2c588ce48a0ee14108 Mon Sep 17 00:00:00 2001
From: Victor Sulema <doc999tor@gmail.com>
Date: Tue, 30 Apr 2019 19:00:48 +0300
Subject: [PATCH 05/30] quiz+poll new design

---
 html/index.html                               | 182 ++++++++++--------
 images/cheering-hands.svg                     |  86 +++++++++
 scripts/src/app.tsx                           |  17 +-
 scripts/src/ui/page/earnThankYou.tsx          |   7 +-
 scripts/src/ui/page/multichoice.question.tsx  |   5 +-
 scripts/src/ui/page/successBasedThankYou.tsx  |  38 ++--
 .../ui/page/timed.multichoice.question.tsx    |   7 +-
 styles/src/page/base.styl                     |   2 +-
 styles/src/page/earnThankYou.styl             |  30 ++-
 styles/src/page/multichoice.question.styl     |  19 +-
 .../src/page/timed.multichoice.question.styl  |  10 +-
 11 files changed, 261 insertions(+), 142 deletions(-)
 create mode 100644 images/cheering-hands.svg

diff --git a/html/index.html b/html/index.html
index 4c38e6c..63a0287 100644
--- a/html/index.html
+++ b/html/index.html
@@ -64,103 +64,119 @@
 							// },
 							//
 							//*** Poll ***//
-							// {
-							// 	type: PageType.FullPageMultiChoice,
-							// 	title: "Who do you primarily chat with on Kik?",
-							// 	description: "Finish the poll to earn <span class='description-price'>+<img src='images/kin-coin.svg'>6,000</span>",
-							// 	question: {
-							// 		id: "G@#$",
-							// 		answers: [
-							// 			"New friends I’ve met on Kik",
-							// 			"Friends I’ve met elsewhere online",
-							// 			"Friends I know from real life",
-							// 			"An equal mix of all three!",
-							// 		],
-							// 	},
-							// },
-							// {
-							// 	type: PageType.FullPageMultiChoice,
-							// 	title: "Who do you primarily chat with on Kik?",
-							// 	description: "Finish the poll to earn <span class='description-price'>+<img src='images/kin-coin.svg'>6,000</span>",
-							// 	question: {
-							// 		id: "G@#$",
-							// 		answers: [
-							// 			"New friends I’ve met on Kik",
-							// 			"Friends I’ve met elsewhere online",
-							// 			"Friends I know from real life",
-							// 			"An equal mix of all three!",
-							// 		],
-							// 	},
-							// },
-							// {
-							// 	type: PageType.EarnThankYou,
-							// 	description: "4,500"
-							// },
-
-							//*** Quiz ***//
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								description: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
-								amount: 15,
-								rightAnswer: 3,
-								question: {
-									id: "erthwt",
-									answers: [
-										"Radonite",
-										"Argonite",
-										"Carbonite",
-										"Kryptonite",
-									],
-								},
-							},
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								description: "How much wood could a woodchuck chuck?",
-								amount: 15,
-								rightAnswer: 2,
-								question: {
-									id: "question-1",
-									answers: [
-										"Not a lot, they are very small",
-										"A woodchuck would chuck as much wood as a woodchuck could chuck",
-										"320 kg",
-										"361.9237001 cm3",
-									],
-								},
-							},
 							{
-								type: PageType.TimedFullPageMultiChoice,
-								description: "Yes?",
-								amount: 20,
-								rightAnswer: 3,
+								type: PageType.FullPageMultiChoice,
+								title: "Who do you primarily chat with on Kik?",
+								rewardText: "Finish the poll to earn",
+								rewardValue: 6000,
 								question: {
-									id: "question-2",
+									id: "G@#$",
 									answers: [
-										"Of course",
-										"no",
-										"320 kg",
-										"Camel",
+										"New friends I’ve met on Kik",
+										"Friends I’ve met elsewhere online",
+										"Friends I know from real life",
+										"An equal mix of all three!",
+										"An equal mix of all four!",
 									],
 								},
 							},
 							{
-								type: PageType.TimedFullPageMultiChoice,
-								description: "Color?",
-								amount: 15,
-								rightAnswer: 4,
+								type: PageType.FullPageMultiChoice,
+								title: "Who do you primarily chat with on Kik?",
+								rewardText: "Finish the poll to earn",
+								rewardValue: 6000,
 								question: {
-									id: "question-3",
+									id: "G@#$",
 									answers: [
-										"Yellow",
-										"Red",
-										"Crimson",
-										"Dorothy",
+										"New friends I’ve met on Kik",
+										"Friends I’ve met elsewhere online",
+										"Friends I know from real life",
+										"An equal mix of all three!",
+										"An equal mix of all four!",
 									],
 								},
 							},
 							{
-								type: PageType.SuccessBasedThankYou,
+								type: PageType.EarnThankYou,
+								description: "4,500"
 							},
+
+							//*** Quiz ***//
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	title: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
+							// 	amount: 15,
+							// 	rightAnswer: 3,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "erthwt",
+							// 		answers: [
+							// 			"Radonite",
+							// 			"Argonite",
+							// 			"Carbonite",
+							// 			"Kryptonite",
+							// 			"Kryptonite-2",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	title: "How much wood could a woodchuck chuck?",
+							// 	amount: 15,
+							// 	rightAnswer: 2,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "question-1",
+							// 		answers: [
+							// 			"Not a lot, they are very small",
+							// 			"A woodchuck would chuck as much wood as a woodchuck could chuck",
+							// 			"320 kg",
+							// 			"361.9237001 cm3",
+							// 			"361.9237001 cm3-2",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	title: "Yes?",
+							// 	amount: 20,
+							// 	rightAnswer: 3,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "question-2",
+							// 		answers: [
+							// 			"Of course",
+							// 			"no",
+							// 			"320 kg",
+							// 			"Camel",
+							// 			"Camel-2",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	title: "Color?",
+							// 	amount: 15,
+							// 	rightAnswer: 4,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "question-3",
+							// 		answers: [
+							// 			"Yellow",
+							// 			"Red",
+							// 			"Crimson",
+							// 			"Dorothy",
+							// 			"Dorothy-2",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.SuccessBasedThankYou,
+							// },
 						]
 					}
 				}
diff --git a/images/cheering-hands.svg b/images/cheering-hands.svg
new file mode 100644
index 0000000..41e12bc
--- /dev/null
+++ b/images/cheering-hands.svg
@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360" height="213" viewBox="0 0 360 213">
+    <defs>
+        <path id="a" d="M50.926 0l15.875 83.423-50.907 9.687L.02 9.687c.816 4.292 12.874 5.602 26.931 2.927C41.009 9.939 51.743 4.293 50.926 0"/>
+        <path id="c" d="M82.47 25.193L15.943 50.612c-4.691 1.792-9.994-.58-11.786-5.27L1.482 38.34c-1.792-4.69.579-9.994 5.269-11.786l66.528-25.42c4.69-1.791 9.994.58 11.786 5.27l2.675 7.003c1.792 4.69-.58 9.994-5.27 11.786"/>
+        <path id="e" d="M55.047-49.122h47.077v113.35H55.047z"/>
+        <path id="f" d="M.394.322h6.638v6.637H.394z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#DF78E8" d="M102.816 160.37l.717-7.262c.347-3.513-1.531-7.454-4.824-8.723l-6.61-4.259-3.764 6.352-2.331 13.985 16.812-.094z"/>
+        <path stroke="#DF78E8" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M100.357 137.064c-.464-4.362-2.506-7.823-7.61-8.446-14.766-1.805-16.084 27.98-16.325 33.239"/>
+        <path stroke="#DF78E8" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M104.999 140.2c-.464-4.364-2.506-7.824-7.612-8.448-14.764-1.805-16.082 27.981-16.324 33.24"/>
+        <path stroke="#DF78E8" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M92.674 134.858c-.464-4.363-2.506-7.823-7.612-8.447-14.764-1.804-16.082 27.98-16.324 33.24"/>
+        <path stroke="#1F1F1F" stroke-linecap="round" stroke-linejoin="round" d="M91.951 119.566c3.438 2.107 6.607 5.604 8.036 9.533 1.377 3.787 1.41 8.127-1.123 11.44-1.296 1.695-3.054 2.77-5.152 3.104-1.823.29-3.85.133-5.477-.803a4.987 4.987 0 0 1-1.343-1.11"/>
+        <path stroke="#1F1F1F" stroke-linecap="round" stroke-linejoin="round" d="M99.68 121.367c3.372 2.2 6.531 5.863 7.972 9.636 1.484 3.887 1.4 8.448-1.135 11.761-1.296 1.694-3.054 2.77-5.152 3.104-1.823.29-3.85.133-5.477-.804a4.999 4.999 0 0 1-1.343-1.109M103.1 148.469a9.502 9.502 0 0 1-2.873-1.046 6.64 6.64 0 0 1-1.543-1.292"/>
+        <path stroke="#DF78E8" stroke-width="42" d="M76.771 217.212l5.268-60.056"/>
+        <path stroke="#149E83" stroke-width="2" d="M100.733 184.454c5.543.539 5.89 2.216 5.886 3.608-.163 4.32-12.008 7.383-26.458 6.838-14.448-.546-26.03-4.491-25.866-8.814.06-1.572 1.25-3.006 4.36-2.713"/>
+        <path stroke="#F1BD19" stroke-width="2" d="M101.201 173.235c3.8.327 4.989 3.304 4.525 5.071-1.098 4.183-13.325 4.6-27.31.931-13.987-3.67-24.435-10.036-23.337-14.219.39-1.486 1.457-2.884 5.399-2.558"/>
+        <path fill="#F28433" d="M101.913 86.208l18.103 7.25c.938.375.889 1.72-.073 2.026L74.86 109.877a1.077 1.077 0 0 1-1.354-.698l-8.058-25.24a1.077 1.077 0 0 1 .698-1.355l45.12-14.405c.964-.307 1.783.761 1.235 1.611l-10.59 16.418z"/>
+        <path fill="#DF78E8" d="M64.2 83.107l16.056 50.292"/>
+        <path stroke="#DB497B" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M64.2 83.107l16.056 50.292"/>
+        <path fill="#DF78E8" d="M68.898 146.31c.08-.695.735-3.638 1.161-4.72 1.082-2.752 2.57-5.568 5.095-7.251 2.645-1.762 6.376-2.2 9.194-.588a8 8 0 0 1 2.976 10.915c-2.607 4.562-2.65 7.982-2.66 8.008"/>
+        <path stroke="#1F1F1F" stroke-linecap="round" stroke-linejoin="round" d="M68.898 146.31c.08-.695.735-3.638 1.161-4.72 1.082-2.752 2.57-5.568 5.095-7.251 2.645-1.762 6.376-2.2 9.194-.588a8 8 0 0 1 2.976 10.915c-2.607 4.562-2.65 7.982-2.66 8.008"/>
+        <path fill="#6F41E8" d="M216.834 218.63l-50.904 9.686-15.882-83.46 50.904-9.688z"/>
+        <g transform="translate(153.207 151.883)">
+            <mask id="b" fill="#fff">
+                <use xlink:href="#a"/>
+            </mask>
+            <use fill="#936BFB" xlink:href="#a"/>
+            <path fill="#FFD654" d="M44.984 29.814c1.177 6.182-2.881 12.147-9.063 13.322-6.181 1.177-12.146-2.88-13.323-9.062-1.176-6.181 2.882-12.146 9.064-13.322 6.18-1.176 12.146 2.88 13.322 9.063M69.75 12.454c1.176 6.182-2.882 12.146-9.064 13.323-6.18 1.176-12.146-2.882-13.323-9.063-1.176-6.18 2.882-12.146 9.064-13.323 6.181-1.175 12.146 2.882 13.322 9.063M73.627 43.077c1.177 6.182-2.88 12.146-9.063 13.322-6.18 1.176-12.146-2.88-13.323-9.062-1.176-6.182 2.882-12.147 9.064-13.323 6.181-1.176 12.146 2.881 13.322 9.063M24.995 54.865c1.176 6.182-2.882 12.146-9.063 13.322-6.182 1.177-12.147-2.88-13.323-9.062-1.176-6.182 2.881-12.147 9.063-13.323 6.181-1.176 12.146 2.881 13.323 9.063M13.588 25.652c1.177 6.182-2.88 12.146-9.063 13.323-6.18 1.176-12.146-2.882-13.322-9.063C-9.974 23.73-5.916 17.765.266 16.59c6.181-1.176 12.146 2.881 13.322 9.063" mask="url(#b)"/>
+        </g>
+        <path fill="#1F1F1F" d="M163.302 148.703c-2.77 0-5.202-.208-7.229-.617-3.289-.675-5.252-1.845-5.527-3.293-.305-1.585 1.387-3.234 2.859-4.337 4.18-3.153 11.922-6.03 20.712-7.699 4.732-.9 9.417-1.377 13.552-1.377 3.222 0 6.069.294 8.231.85 2.695.683 4.316 1.77 4.564 3.061.294 1.563-1.34 3.183-2.762 4.267-4.105 3.14-12.079 6.116-20.81 7.766-4.742.902-9.442 1.38-13.59 1.38"/>
+        <path fill="#6F41E8" d="M187.67 130.88c-4.037 0-8.72.448-13.646 1.386-9.12 1.73-16.849 4.72-20.919 7.79-2.2 1.65-3.34 3.32-3.05 4.83.33 1.74 2.51 2.99 5.92 3.69 2.045.413 4.532.627 7.33.627 4.045 0 8.738-.447 13.68-1.387 9.2-1.74 16.98-4.77 21.02-7.86 2.14-1.63 3.23-3.27 2.95-4.76-.3-1.56-2.09-2.73-4.93-3.45-2.216-.569-5.072-.866-8.355-.866m.001 0v1c3.18 0 5.982.29 8.108.835 2.458.624 3.988 1.597 4.193 2.666.193 1.026-.72 2.368-2.574 3.78-4.046 3.095-11.939 6.034-20.6 7.672-4.71.897-9.376 1.37-13.493 1.37-2.739 0-5.138-.204-7.129-.606-3.035-.623-4.908-1.68-5.139-2.9-.199-1.037.748-2.4 2.67-3.842 4.06-3.063 11.917-5.978 20.505-7.607 4.7-.894 9.354-1.368 13.458-1.368l.001-1"/>
+        <path fill="#FFD654" d="M197.715 138.916c-.1.08-.21.17-.32.25-4.04 3.09-11.94 6.03-20.6 7.67-4.71.89-9.37 1.37-13.49 1.37-2.74 0-5.14-.21-7.13-.61-.22-.04-.43-.09-.63-.14a79.68 79.68 0 0 1-2.14-6.37c-.1-.34-.2-.68-.3-1.03-2.42-8.57-4.55-20.98-2.59-34.74.1 0 43.34-6.62 43.34-6.62s-1.21 15.85 2.17 33.05c.07.36.15.73.23 1.1.41 2.01.9 4.05 1.46 6.07"/>
+        <path stroke="#FFD654" stroke-linecap="round" stroke-linejoin="round" stroke-width="14" d="M168.05 100.19c-.743-4.25-1.958-5.802-4.049-7.49-.98-.79-2.479-.82-3.31.13-2.173 2.478-3.58 10.567-3.998 20.868 0 0-.383 8.042 1.148 14.17"/>
+        <path fill="#B23E66" d="M116.145 119.625c-.71-1.839.836-3.758 2.784-3.453l8.908 1.39 8.91 1.39c1.948.305 2.835 2.604 1.598 4.14l-5.658 7.018-5.66 7.02c-1.236 1.535-3.671 1.155-4.382-.684l-3.25-8.41-3.25-8.41zM226.297 77.538c-.696-1.845-3.129-2.243-4.378-.718l-5.71 6.978-5.713 6.976c-1.249 1.526-.378 3.831 1.568 4.15l8.898 1.458 8.898 1.458c1.945.32 3.506-1.588 2.81-3.433l-3.186-8.434-3.187-8.435z"/>
+        <g transform="translate(129.825 81.122)">
+            <mask id="d" fill="#fff">
+                <use xlink:href="#c"/>
+            </mask>
+            <use fill="#DB497B" xlink:href="#c"/>
+            <path fill="#1DC2A4" d="M33.918 1.95l-17.6 92.97c-.933 4.933-5.734 8.206-10.668 7.271l-11.219-2.124c-4.933-.933-8.206-5.734-7.272-10.668L4.76-3.57c.933-4.933 5.734-8.206 10.668-7.27l11.22 2.122c4.932.935 8.205 5.734 7.271 10.668M101.965-36.17l-17.6 92.968c-.933 4.933-5.734 8.206-10.668 7.271l-11.219-2.123c-4.933-.934-8.205-5.735-7.272-10.668l17.6-92.97c.933-4.933 5.734-8.206 10.668-7.27l11.22 2.123c4.932.934 8.205 5.734 7.271 10.668" mask="url(#d)"/>
+        </g>
+        <path fill="#FFD654" d="M196.531 93.4c-.943-5.403-2.78-8.693-6.548-11.73-3.782-3.053-9.11-2.821-12.456.43-3.548-1.294-7.6-.41-10.18 2.529-.378.432-.687.9-.942 1.388-3.725-1.75-8.207-.966-10.979 2.199-2.548 2.908-1.578 6.182 1.331 8.73 1.363 1.195 5.52 10.355 11.284 10.245a7.97 7.97 0 0 0 1.212-.105 6.995 6.995 0 0 0 5.677-5.652c1.293 1.347 3.088 2.173 5.03 2.173a6.97 6.97 0 0 0 5.854-3.164c1.113.729 2.424 1.163 3.814 1.163a7 7 0 0 0 6.903-8.205"/>
+        <path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M164.216 84.457c3.44 1.043 6.372 3.655 8.22 6.702 1.253 2.066 2.42 4.495 2.821 6.887.24 1.431.397 3.2.027 4.501M176.245 81.036c3.44 1.043 6.401 3.581 8.25 6.628 1.252 2.065 2.312 4.47 2.713 6.861.388 2.315.1 4.766-1.154 6.503"/>
+        <path fill="#FFD654" d="M168.894 128.326c.008-.032.314-3.38 2.229-7.62a8 8 0 0 0-4.001-10.583c-3.2-1.443-7.494-.603-9.534 2.358-1.714 2.488-2.975 5.47-3.646 8.384-.717 3.114-1.047 6.273-1.047 9.483"/>
+        <path stroke="#1F1F1F" stroke-linecap="round" stroke-linejoin="round" d="M168.894 128.326c.008-.032.314-3.38 2.229-7.62a8 8 0 0 0-4.001-10.583c-3.2-1.443-7.494-.603-9.534 2.358-1.714 2.488-2.975 5.47-3.646 8.384-.717 3.114-1.047 6.273-1.047 9.483"/>
+        <path fill="#FFD654" stroke="#FFD654" d="M280.347 199.317c4.019.747 17.298 4.266 17.017 18.068a.917.917 0 0 1-.9.89c-3.445.073-16.064-.84-17.196-18.003a.916.916 0 0 1 1.079-.955z"/>
+        <path fill="#FFD654" stroke="#FFD654" d="M282.026 200.216c1.305-3.873 6.655-16.525 20.282-14.306a.915.915 0 0 1 .754 1.015c-.412 3.422-3.09 15.787-20.242 14.495a.917.917 0 0 1-.794-1.204z"/>
+        <path fill="#F28433" d="M287.507 199.519a4.623 4.623 0 1 1-9.246 0 4.623 4.623 0 0 1 9.246 0"/>
+        <path fill="#1DC2A4" d="M308.207 143.273a8 8 0 0 0-11.16 1.857l-10.798 15.112 9.868-20.425a8 8 0 1 0-14.406-6.961l-8.45 17.49 3.878-16.814a7.999 7.999 0 0 0-5.997-9.593 7.997 7.997 0 0 0-9.593 5.997l-5.983 25.938-.2-.468a8 8 0 0 0-10.505-4.202 8.002 8.002 0 0 0-4.202 10.505l5.592 13.047a7.97 7.97 0 0 0 4.011 4.117l-.142.616a7.999 7.999 0 0 0 7.802 9.8 7.952 7.952 0 0 0 3.141-.652 7.973 7.973 0 0 0 1.943 1.323 7.984 7.984 0 0 0 3.002.772 7.984 7.984 0 0 0 3.331 6.935 7.993 7.993 0 0 0 11.16-1.858l29.565-41.376a7.998 7.998 0 0 0-1.857-11.16"/>
+        <path fill="#1DC2A4" d="M308.207 143.273a8 8 0 0 0-11.16 1.857l-10.798 15.112 9.868-20.425a8 8 0 1 0-14.406-6.961l-8.45 17.49 3.878-16.814a7.999 7.999 0 0 0-5.997-9.593 7.997 7.997 0 0 0-9.593 5.997l-5.983 25.938-.2-.468a8 8 0 0 0-10.505-4.202 8.002 8.002 0 0 0-4.202 10.505l5.592 13.047c.043.1.096.196.143.294l-16.725 46.56 39.527 14.198 17.402-48.445-.05-.018 23.516-32.912a7.998 7.998 0 0 0-1.857-11.16"/>
+        <path stroke="#1F1F1F" stroke-linecap="round" stroke-linejoin="round" d="M254.845 151.562c.901 4.17 2.805 8.085 6.253 10.468 1.575 1.089 3.546 1.909 5.273 2.599"/>
+        <path fill="#1DC2A4" d="M245.135 172.203s1.388 2.717.211 5.75c.053.018 1.81-1.179 1.81-1.179l1.302-2.215-2.831-2.954-.492.598z"/>
+        <path fill="#FFD654" d="M243.298 180.593c5.272 3.961 18.303 12.065 41.814 14.156-.846 1.32-2.47 6.237-3.108 8.325-.184.601-.714 1.035-1.34 1.177-5.278 1.203-30.057 5.952-43.669-7.288a1.729 1.729 0 0 1-.402-1.853c1.06-2.824 3.857-10.718 4.976-13.883.246-.695 1.132-1.082 1.73-.634"/>
+        <path stroke="#DB497B" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="2" d="M61.515 60.22c2.104.926 3.553 3.139 3.374 5.43-.05.628-.267 1.38-.624 1.897-.297.432-.716.766-1.164 1.035-.835.502-1.816.8-2.784.695-.968-.106-1.909-.658-2.353-1.524-.444-.866-.3-2.035.431-2.677.85-.745 2.254-.586 3.098.167.843.753 1.18 1.95 1.138 3.08-.07 1.924-1.19 3.779-2.86 4.739"/>
+        <path stroke="#6F41E8" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="2" d="M13.572 154.76c-1.583-1.667-2.063-4.269-1.011-6.312.287-.56.778-1.169 1.307-1.509.441-.283.957-.429 1.474-.504.964-.141 1.986-.036 2.836.436.851.472 1.506 1.344 1.581 2.315.075.97-.51 1.993-1.433 2.302-1.072.359-2.306-.332-2.792-1.352-.486-1.021-.335-2.254.141-3.279.81-1.748 2.56-3.026 4.471-3.266"/>
+        <path stroke="#DC650F" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="2" d="M223.927 134.57c-1.889 1.31-4.533 1.39-6.394.037-.508-.37-1.036-.946-1.292-1.522-.211-.478-.278-1.01-.273-1.534.008-.972.267-1.965.862-2.736.597-.77 1.558-1.284 2.529-1.21.97.073 1.892.807 2.057 1.766.192 1.114-.677 2.228-1.76 2.553-1.083.327-2.28-.01-3.221-.637-1.604-1.067-2.601-2.99-2.546-4.916"/>
+        <path fill="#F28433" d="M148.642 72.99c.452-1.24 1.812-3.938 5.437-5.751.18-.092.28-.28.173-.452-.618-.984-2.327-3.91-2.821-4.759a.307.307 0 0 0-.386-.131c-1.156.486-5.952 2.753-6.69 7.119a.317.317 0 0 0 .092.28c.545.538 2.799 2.882 3.68 3.801.16.168.436.11.515-.106"/>
+        <path fill="#A6A6A6" d="M44.797 117.674c.57 1.19 1.545 4.052.303 7.909-.06.193.004.397.201.44 1.136.247 4.423 1.075 5.374 1.315a.308.308 0 0 0 .365-.184c.461-1.167 2.198-6.178-.405-9.76a.318.318 0 0 0-.263-.132c-.766.014-4.019-.018-5.292-.03a.307.307 0 0 0-.283.442M342.46 108.47c-1.307-.18-4.233-.937-6.772-4.097-.126-.157-.333-.214-.477-.073-.83.813-3.33 3.103-4.055 3.765a.308.308 0 0 0-.047.405c.721 1.027 3.952 5.234 8.374 5.03a.316.316 0 0 0 .255-.147c.41-.648 2.225-3.347 2.936-4.404a.307.307 0 0 0-.214-.48"/>
+        <path fill="#936BFB" d="M243.083 117.001c-.219 1.302-1.063 4.204-4.296 6.648-.16.122-.225.327-.088.475.788.855 3.002 3.421 3.643 4.164a.308.308 0 0 0 .404.06c1.048-.69 5.35-3.795 5.276-8.222a.32.32 0 0 0-.14-.26c-.634-.428-3.279-2.322-4.315-3.064a.306.306 0 0 0-.484.2"/>
+        <path fill="#FFD654" d="M319.508 26.405c-.219 1.302-1.062 4.204-4.296 6.648-.16.123-.224.328-.087.476.787.854 3.002 3.42 3.643 4.163a.307.307 0 0 0 .403.06c1.05-.69 5.35-3.794 5.277-8.222a.32.32 0 0 0-.14-.26c-.635-.427-3.279-2.322-4.315-3.064a.307.307 0 0 0-.485.2M244.508 68.406c-.219 1.301-1.062 4.203-4.296 6.647-.16.123-.224.328-.087.475.787.855 3.002 3.421 3.643 4.164a.307.307 0 0 0 .403.06c1.05-.69 5.35-3.794 5.277-8.221a.32.32 0 0 0-.14-.26c-.635-.428-3.279-2.323-4.315-3.064a.307.307 0 0 0-.485.199M230.855 171.291c-.568 1.19-1.545 4.051-.303 7.91.062.192-.004.396-.201.438-1.136.247-4.423 1.075-5.374 1.316a.308.308 0 0 1-.364-.184c-.462-1.167-2.2-6.178.404-9.76a.317.317 0 0 1 .264-.132c.765.013 4.018-.018 5.292-.03a.307.307 0 0 1 .282.442"/>
+        <path fill="#F28433" d="M38.545 173.035c-1.317.071-4.334-.117-7.427-2.737-.154-.13-.367-.148-.482.018-.662.956-2.68 3.68-3.266 4.466a.307.307 0 0 0 .03.407c.903.871 4.873 4.39 9.177 3.35a.322.322 0 0 0 .223-.194c.28-.713 1.55-3.708 2.046-4.88a.307.307 0 0 0-.3-.43"/>
+        <path fill="#FFD654" d="M51.545 29.355c-1.317.07-4.334-.117-7.427-2.737-.154-.13-.367-.148-.482.018-.662.956-2.68 3.679-3.266 4.466a.307.307 0 0 0 .03.407c.903.87 4.873 4.389 9.177 3.35a.322.322 0 0 0 .223-.194c.28-.713 1.55-3.708 2.046-4.88a.307.307 0 0 0-.3-.43"/>
+        <path fill="#DB497B" d="M303.396 111.011c-1.308-.177-4.235-.928-6.782-4.081-.127-.157-.333-.214-.478-.072-.83.814-3.323 3.109-4.045 3.773a.307.307 0 0 0-.046.405c.723 1.027 3.962 5.226 8.385 5.012a.319.319 0 0 0 .255-.148c.409-.649 2.217-3.352 2.926-4.41a.307.307 0 0 0-.215-.479"/>
+        <path fill="#DF78E8" d="M19.075 110.123a3.318 3.318 0 1 1-6.636 0 3.318 3.318 0 0 1 6.636 0"/>
+        <path fill="#FFD654" d="M108.693 114.08a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <path fill="#936BFB" d="M39.458 83.654a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <path fill="#B041BA" d="M24.522 199.91a3.318 3.318 0 1 1-6.636 0 3.318 3.318 0 0 1 6.636 0"/>
+        <path fill="#A6A6A6" d="M97.118 32.378a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <path fill="#F28433" d="M319.969 196.804a3.319 3.319 0 1 1-6.64-.002 3.319 3.319 0 0 1 6.64.002"/>
+        <path fill="#B041BA" d="M149.288 194.378a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0M299.139 69.825a3.319 3.319 0 1 1-6.64-.002 3.319 3.319 0 0 1 6.64.002M217.628 25.059a3.318 3.318 0 1 1-6.637.001 3.318 3.318 0 0 1 6.637-.001"/>
+        <path fill="#6F41E8" d="M147.671 4.123a3.318 3.318 0 1 1-6.636 0 3.318 3.318 0 0 1 6.636 0M332.926 142.335a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <path fill="#A6A6A6" d="M270.437 95.952a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <g transform="translate(340 58.993)">
+            <mask id="g" fill="#fff">
+                <use xlink:href="#f"/>
+            </mask>
+            <path fill="#F28433" d="M7.032 3.641a3.319 3.319 0 1 1-6.64-.002 3.319 3.319 0 0 1 6.64.002" mask="url(#g)"/>
+        </g>
+        <path fill="#DB497B" d="M248.48 46.165a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <path stroke="#936BFB" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M119.06 163.825c2.065.531 3.77 2.134 4.522 3.965 1.004 2.443 1.111 6.345-2.036 7.263-.958.28-2.063.07-2.803-.6-1.359-1.23-.968-3.42.623-4.224 2.527-1.277 5.527.53 6.617 2.894.782 1.696.96 4.206 0 5.807"/>
+        <path stroke="#1DC2A4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M192.197 45.18c.018 2.135-1.094 4.193-2.67 5.39-2.103 1.597-5.847 2.703-7.541-.103-.517-.854-.599-1.976-.14-2.864.84-1.63 3.056-1.813 4.242-.483 1.882 2.117.907 5.48-1.1 7.14-1.438 1.19-3.817 2.007-5.612 1.49"/>
+        <path stroke="#DF78E8" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M276.051 35.93c-2.108.327-4.307-.474-5.72-1.86-1.885-1.851-3.522-5.393-.992-7.477.772-.635 1.869-.878 2.814-.554 1.733.595 2.237 2.76 1.092 4.126-1.819 2.17-5.289 1.695-7.223-.05-1.386-1.25-2.539-3.488-2.289-5.337"/>
+        <path stroke="#B041BA" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="2" d="M339.283 165.46c-1.132 1.343-1.938 3.025-1.944 4.782-.005 1.756.894 3.562 2.457 4.361 1.692.864 4.959.14 4.968-2.196.005-1.45-1.55-2.254-2.848-2.07-.776.11-1.51.48-2.062 1.037-.688.696-1.065 1.647-1.27 2.605-.346 1.626-.137 3.541 1.142 4.601.88.73 2.086.91 3.228.958M135.282 31.46c-1.132 1.343-1.937 3.025-1.943 4.782-.006 1.756.893 3.562 2.458 4.361 1.691.864 4.958.14 4.966-2.196.005-1.45-1.549-2.254-2.846-2.07-.776.11-1.512.48-2.063 1.037-.688.696-1.066 1.647-1.27 2.605-.346 1.626-.138 3.541 1.142 4.601.88.73 2.085.91 3.228.958"/>
+    </g>
+</svg>
diff --git a/scripts/src/app.tsx b/scripts/src/app.tsx
index afdf7f1..e3511c7 100644
--- a/scripts/src/app.tsx
+++ b/scripts/src/app.tsx
@@ -47,6 +47,8 @@ export interface CommonProps {
 	totalPagesCount: number;
 	currentPage: number;
 	sharedData: SharedData;
+	rewardText?: string;
+	rewardValue?: number;
 	updateSharedDate(data: any): void;
 	navigateBack(): void;
 }
@@ -149,6 +151,8 @@ class App extends React.Component {
 				pageIndex: index,
 				id: page.question && page.question.id,
 				title: page.title,
+				rewardText: page.rewardText,
+				rewardValue: page.rewardValue,
 				isDisplayed: this.state.currentPage === index,
 				totalPagesCount: this.state.pages.length,
 				currentPage: this.state.currentPage,
@@ -162,7 +166,8 @@ class App extends React.Component {
 					return <MultichoiceQuestion
 						{...commonProps}
 						choices={page.question.choices}
-						description={page.description}
+						rewardText={page.rewardText}
+						rewardValue={page.rewardValue}
 						onSelected={this.onPageCompleteHandler}
 						rightAnswer={page.rightAnswer}/>;
 				case PageType.ImageAndText:
@@ -170,7 +175,15 @@ class App extends React.Component {
 				case PageType.EarnThankYou:
 					return <EarnThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} hideTopBarHandler={bridge.hideTopBar} amount={page.description}/>;
 				case PageType.TimedFullPageMultiChoice:
-					return <TimedMultichoiceQuestion {...commonProps} choices={page.question.choices} title={page.description} onSelected={this.onPageCompleteHandler} amount={page.amount} rightAnswer={page.rightAnswer}/>;
+					return <TimedMultichoiceQuestion
+						{...commonProps}
+						choices={page.question.choices}
+						title={page.title}
+						rewardText={page.rewardText}
+						rewardValue={page.rewardValue}
+						onSelected={this.onPageCompleteHandler}
+						amount={page.amount}
+						rightAnswer={page.rightAnswer}/>;
 				case PageType.SuccessBasedThankYou:
 					return <SuccessBasedThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} hideTopBarHandler={bridge.hideTopBar}/>;
 			}
diff --git a/scripts/src/ui/page/earnThankYou.tsx b/scripts/src/ui/page/earnThankYou.tsx
index b7d7be1..2b215f5 100644
--- a/scripts/src/ui/page/earnThankYou.tsx
+++ b/scripts/src/ui/page/earnThankYou.tsx
@@ -29,13 +29,10 @@ export class EarnThankYou extends React.Component<EarnThankYouProps> {
 
 				<div className="text">
 					<div>Yay! You've earned</div>
-					<div className="amount">{this.props.amount}</div>
-					<img src={getImageUrl("kin-type")} className="kin-type"/>
+					<span className="amount"><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' /><span>{this.props.amount}</span></span>
 				</div>
 				<div className={"footer"}>
-					<img src={getImageUrl("coins")} className="coins"/>
-					<img src={getImageUrl("sparks")} className="sparks"/>
-					{diamonds}
+					<img src="images/cheering-hands.svg" className="cheering-hands"/>
 				</div>
 			</BasePage>
 		);
diff --git a/scripts/src/ui/page/multichoice.question.tsx b/scripts/src/ui/page/multichoice.question.tsx
index 08b193b..cbc2ca9 100644
--- a/scripts/src/ui/page/multichoice.question.tsx
+++ b/scripts/src/ui/page/multichoice.question.tsx
@@ -60,10 +60,11 @@ export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMu
 			<React.Fragment>
 				<div className="header-controls">
 					<button className="back-nav" onClick={this.props.navigateBack}><img src="images/ic-back.svg" /></button>
-					<span className="title">{this.props.title}</span>
+					<span></span>
 					<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
 				</div>
-				<div className="description" dangerouslySetInnerHTML={{ __html: this.props && this.props.description! }}/>
+				<span className="title">{this.props.title}</span>
+				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' />{ Number(this.props.rewardValue) }</span> </div>
 			</React.Fragment>
 		);
 	}
diff --git a/scripts/src/ui/page/successBasedThankYou.tsx b/scripts/src/ui/page/successBasedThankYou.tsx
index 36fd500..de2b70b 100644
--- a/scripts/src/ui/page/successBasedThankYou.tsx
+++ b/scripts/src/ui/page/successBasedThankYou.tsx
@@ -46,16 +46,12 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<React.Fragment>
 				<div className="text">
-					<h1 className={ "" }>Better Luck Next Time!</h1>
-					<h2>Thanks for trying, you've earned</h2>
-					<div className="amount">1</div>
-					<img src={ getImageUrl("kin-type") } className="kin-type"/>
-					<h2>for the effort</h2>
+					<h1 className={ "" }>Better luck next time!</h1>
+					<h2>you've earned:</h2>
+					<span className="amount"><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' /><span>1</span></span>
 				</div>
-				<div className={ "footer" }>
-					<img src={ getImageUrl("coins") } className="coins"/>
-					<img src={ getImageUrl("sparks") } className="sparks"/>
-					{ SuccessBasedThankYou.diamondElements }
+				<div className="footer">
+					<img src="images/cheering-hands.svg" className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
@@ -66,14 +62,11 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 			<React.Fragment>
 				<div className="text">
 					<h1 className={ "" }>Well Done!</h1>
-					<h2>Yay! You've earned</h2>
-					<div className="amount">{ this.props.sharedData.earnedAmount }</div>
-					<img src={ getImageUrl("kin-type") } className="kin-type"/>
+					<h2>Yay! You've earned:</h2>
+					<span className="amount"><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' /><span>{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
-				<div className={ "footer" }>
-					<img src={ getImageUrl("coins") } className="coins"/>
-					<img src={ getImageUrl("sparks") } className="sparks"/>
-					{ SuccessBasedThankYou.diamondElements }
+				<div className="footer">
+					<img src="images/cheering-hands.svg" className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
@@ -83,15 +76,12 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<React.Fragment>
 				<div className="text">
-					<h1 className={ "" }>Perfect Score!</h1>
-					<h2>Yay! You've earned</h2>
-					<div className="amount">{ this.props.sharedData.earnedAmount }</div>
-					<img src={ getImageUrl("kin-type") } className="kin-type"/>
+					<h1 className={ "" }>High five!</h1>
+					<h2>Yay! You've earned:</h2>
+					<span className="amount"><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' /><span>{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
-				<div className={ "footer" }>
-					<img src={ getImageUrl("coins") } className="coins"/>
-					<img src={ getImageUrl("sparks") } className="sparks"/>
-					{ SuccessBasedThankYou.diamondElements }
+				<div className="footer">
+					<img src="images/cheering-hands.svg" className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
diff --git a/scripts/src/ui/page/timed.multichoice.question.tsx b/scripts/src/ui/page/timed.multichoice.question.tsx
index 76701b4..a2e1e27 100644
--- a/scripts/src/ui/page/timed.multichoice.question.tsx
+++ b/scripts/src/ui/page/timed.multichoice.question.tsx
@@ -40,7 +40,7 @@ class Timer extends React.Component<TimerProps, TimerState> {
 	}
 
 	public componentDidMount() {  // First timer won't get componentDidUpdate
-		// setTimeout(this.updateTime, 1000);
+		setTimeout(this.updateTime, 1000);
 	}
 
 	private updateTime() {
@@ -69,10 +69,11 @@ class TimedMultichoiceQuestion extends MultichoiceQuestion {
 			<React.Fragment>
 				<div className="header-controls">
 					<button className="back-nav" onClick={this.props.navigateBack}><img src="images/ic-back.svg" /></button>
-					<span className="title">{this.props.title}</span>
+					<Timer parent={this.props.pageIndex} pause={!this.props.isDisplayed} time={quizTimerTime} callback={this.onSelect.bind(this, null, -1)}/>
 					<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
 				</div>
-				<Timer parent={this.props.pageIndex} pause={!this.props.isDisplayed} time={quizTimerTime} callback={this.onSelect.bind(this, null, -1)}/>
+				<p className="title">{this.props.title}</p>
+				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' />{ Number(this.props.rewardValue) }</span> </div>
 			</React.Fragment>
 		);
 	}
diff --git a/styles/src/page/base.styl b/styles/src/page/base.styl
index 800e0d8..85d5418 100644
--- a/styles/src/page/base.styl
+++ b/styles/src/page/base.styl
@@ -10,6 +10,6 @@
 		position relative
 		.header
 			border: none
-			border-bottom: solid 1px #d7dce9
+			border-bottom: solid 1px #3d3d3d
 			flex-box(column)
 
diff --git a/styles/src/page/earnThankYou.styl b/styles/src/page/earnThankYou.styl
index b45b955..9360599 100644
--- a/styles/src/page/earnThankYou.styl
+++ b/styles/src/page/earnThankYou.styl
@@ -7,7 +7,7 @@
 	width: 100%
 	height: 100%
 	flex-box(column)  // This is kind of a hack to make it full screen
-	background-image: linear-gradient(7deg, $bright-sky-blue, $bright-blue)
+	background-image: #1f1f1f
 	.text
 		font-roboto()
 		color: white
@@ -16,11 +16,11 @@
 		font-size: 8vw
 		margin: 30vh 0 0
 		h1
-			font-size: 10vw
-			margin: 6vh 0 0;
+			font-size: 1.2rem
+			margin: 6vh 0 .5rem;
 			font-roboto()
 		h2
-			font-size: 6vw
+			font-size: 1.2rem
 			margin: 0;
 			font-roboto()
 		.standAloneText
@@ -28,14 +28,24 @@
 			font-size: 8vw
 			font-roboto()
 		.amount
-			font-weight: bold
-			font-size: 16vw
-		.kin-type
-			width: 16vw
+			font-weight: 500
+			font-size: 12vw
+			color: $kin-purple
+			> *
+				vertical-align: middle
+			.full-width-plus
+				font-size: 7vw
+			img
+				width: 1.3rem
+				margin-right: .4rem
 	.footer
 		img
 			position: absolute
-		.diamonds
+			&.cheering-hands
+				width: 100%
+				left: 0
+				bottom: 0
+		/* .diamonds
 			width: 7vw;
 		.coins
 			bottom: 0
@@ -77,6 +87,6 @@
 		.diamond-r-1
 			left: 84vw;
 			bottom: 13.3vw;
-			width: 8.2vw
+			width: 8.2vw */
 
 
diff --git a/styles/src/page/multichoice.question.styl b/styles/src/page/multichoice.question.styl
index 89cccd2..25f1bb0 100644
--- a/styles/src/page/multichoice.question.styl
+++ b/styles/src/page/multichoice.question.styl
@@ -9,11 +9,12 @@
 		.header-controls
 			flex-box()
 			justify-content: space-between
-			align-items: flex-start
+			align-items: center
 			font-size: 6.2vw
 		.title
+			display: inline-block
 			width: 72vw
-			margin: 0 auto 8%
+			margin: 0.1rem auto 8%
 		button.back-nav
 			-webkit-appearance: none
 			border: none
@@ -24,7 +25,7 @@
 
 		.description
 			margin: 3vh auto
-			font-size: 4.2vw
+			font-size: .9rem
 			.description-price
 				display: -webkit-inline-flex
 				display: -moz-inline-flex
@@ -34,21 +35,25 @@
 				align-items: center
 				vertical-align: middle
 				color: $kin-purple
+				line-height: 90%
 
 				img
-					width: 6px
-					margin: 0 3px
-
+					width: 7px
+					margin-right: 3px
+				.full-width-plus
+					font-size: .8rem
+					font-weight bold
 	.choices
 		margin: 6% auto 0
 		flex-box(column)
 	.choice
 		position relative
 		btn()
-		margin: 5% auto
+		margin: 4% auto
 		background: inherit
 		color: currentColor
 		outline none
+		font-size:.9rem
 		&.rightAnswer
 			btn-active()
 		&.wrongAnswer
diff --git a/styles/src/page/timed.multichoice.question.styl b/styles/src/page/timed.multichoice.question.styl
index 09bbc73..926020b 100644
--- a/styles/src/page/timed.multichoice.question.styl
+++ b/styles/src/page/timed.multichoice.question.styl
@@ -3,11 +3,11 @@
 .page.question.multichoice.timed
 	.header
 		.timer
-			width: 15vw
-			font-size: 6.2vw
-			text-align: center
+			//width: 15vw
+			font-size: 1.3rem
+			//text-align: center
 			letter-spacing: -0.5px
-			margin: 10% auto 1%
+			color: #ea690b
 			font-roboto()
 			&.warn
 				color: $watermelon
@@ -19,7 +19,7 @@
 			font-size: 4.5vw
 			text-align: center
 			letter-spacing: -0.5px
-			margin: 5% auto 1%
+			// margin: 5% auto 1%
 
 		.title
 			margin: 2% auto 10%

From c0726b46d784f9be77919cc5aa2e34533cdbe256 Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Thu, 2 May 2019 14:57:55 +0300
Subject: [PATCH 06/30] basic script for changing offer_contents pages schema

---
 updateJsonSchema.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 updateJsonSchema.js

diff --git a/updateJsonSchema.js b/updateJsonSchema.js
new file mode 100644
index 0000000..72d9632
--- /dev/null
+++ b/updateJsonSchema.js
@@ -0,0 +1,20 @@
+var offer_contents = (await OfferContent.find())
+
+async function updateOfferContents (type, pageTypeNum) {
+	for (var i = 0; i < offer_contents.length; i++) {
+		var oc = offer_contents[i];
+		if (oc.contentType !== type) { continue; }; // I divided polls and quizzes to two separate calls
+		var content = JSON.parse(oc.content);
+		content.pages.forEach(page => {
+			if (page.type !== pageTypeNum) { return false; }
+			page.rewardText = page.description.replace(/ \${amount}.*/, '');
+			page.rewardValue = '${amount}';
+			page.description = '';
+		});
+		oc.content = JSON.stringify(content);
+		await oc.save();
+	}
+}
+
+updateOfferContents('poll', 0);
+updateOfferContents('quiz', 3);
\ No newline at end of file

From 53dff4c772161f70fb1880ab8c668f9bf38ee7c1 Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Sun, 5 May 2019 11:21:20 +0300
Subject: [PATCH 07/30] images paths changed to S3

---
 scripts/src/ui/page/earnThankYou.tsx               |  7 ++-----
 scripts/src/ui/page/multichoice.question.tsx       |  6 ++++--
 scripts/src/ui/page/successBasedThankYou.tsx       | 12 ++++++------
 scripts/src/ui/page/timed.multichoice.question.tsx |  6 ++++--
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/scripts/src/ui/page/earnThankYou.tsx b/scripts/src/ui/page/earnThankYou.tsx
index 2b215f5..23dd738 100644
--- a/scripts/src/ui/page/earnThankYou.tsx
+++ b/scripts/src/ui/page/earnThankYou.tsx
@@ -22,17 +22,14 @@ export class EarnThankYou extends React.Component<EarnThankYouProps> {
 	}
 
 	public render() {
-		const diamonds = [ "l-1", "l-2", "l-3", "l-4", "c-1", "c-2", "r-3", "r-2", "r-1" ]
-			.map((name, index) => <img key={index} src={getImageUrl("diamond-" + name)} className={"diamond-" + name + " diamonds"}/>);
 		return (
 			<BasePage className="earnThankYou">
-
 				<div className="text">
 					<div>Yay! You've earned</div>
-					<span className="amount"><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' /><span>{this.props.amount}</span></span>
+					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } /><span>{this.props.amount}</span></span>
 				</div>
 				<div className={"footer"}>
-					<img src="images/cheering-hands.svg" className="cheering-hands"/>
+					<img src={ getImageUrl('cheering-hands.svg') } className="cheering-hands"/>
 				</div>
 			</BasePage>
 		);
diff --git a/scripts/src/ui/page/multichoice.question.tsx b/scripts/src/ui/page/multichoice.question.tsx
index cbc2ca9..6f899ae 100644
--- a/scripts/src/ui/page/multichoice.question.tsx
+++ b/scripts/src/ui/page/multichoice.question.tsx
@@ -20,6 +20,8 @@ export interface FullPageMultiChoiceState {
 	wrongAnswer: number | null;
 }
 
+const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
+
 export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMultiChoiceProps, S extends FullPageMultiChoiceState = FullPageMultiChoiceState> extends React.Component<P, S> {
 	protected additionalClasses = new Set(" ");
 	protected highlightRightWrong = false;
@@ -59,12 +61,12 @@ export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMu
 		return (
 			<React.Fragment>
 				<div className="header-controls">
-					<button className="back-nav" onClick={this.props.navigateBack}><img src="images/ic-back.svg" /></button>
+					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl('ic-back.svg') } /></button>
 					<span></span>
 					<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
 				</div>
 				<span className="title">{this.props.title}</span>
-				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' />{ Number(this.props.rewardValue) }</span> </div>
+				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } />{ Number(this.props.rewardValue) }</span> </div>
 			</React.Fragment>
 		);
 	}
diff --git a/scripts/src/ui/page/successBasedThankYou.tsx b/scripts/src/ui/page/successBasedThankYou.tsx
index de2b70b..0123f3e 100644
--- a/scripts/src/ui/page/successBasedThankYou.tsx
+++ b/scripts/src/ui/page/successBasedThankYou.tsx
@@ -48,10 +48,10 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 				<div className="text">
 					<h1 className={ "" }>Better luck next time!</h1>
 					<h2>you've earned:</h2>
-					<span className="amount"><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' /><span>1</span></span>
+					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } /><span>1</span></span>
 				</div>
 				<div className="footer">
-					<img src="images/cheering-hands.svg" className="cheering-hands"/>
+					<img src={ getImageUrl('cheering-hands.svg') } className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
@@ -63,10 +63,10 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 				<div className="text">
 					<h1 className={ "" }>Well Done!</h1>
 					<h2>Yay! You've earned:</h2>
-					<span className="amount"><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' /><span>{ this.props.sharedData.earnedAmount }</span></span>
+					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } /><span>{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
 				<div className="footer">
-					<img src="images/cheering-hands.svg" className="cheering-hands"/>
+					<img src={ getImageUrl('cheering-hands.svg') } className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
@@ -78,10 +78,10 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 				<div className="text">
 					<h1 className={ "" }>High five!</h1>
 					<h2>Yay! You've earned:</h2>
-					<span className="amount"><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' /><span>{ this.props.sharedData.earnedAmount }</span></span>
+					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } /><span>{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
 				<div className="footer">
-					<img src="images/cheering-hands.svg" className="cheering-hands"/>
+					<img src={ getImageUrl('cheering-hands.svg') } className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
diff --git a/scripts/src/ui/page/timed.multichoice.question.tsx b/scripts/src/ui/page/timed.multichoice.question.tsx
index a2e1e27..4c9bc20 100644
--- a/scripts/src/ui/page/timed.multichoice.question.tsx
+++ b/scripts/src/ui/page/timed.multichoice.question.tsx
@@ -19,6 +19,8 @@ interface TimerState {
 	time: number;
 }
 
+const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
+
 class Timer extends React.Component<TimerProps, TimerState> {
 	constructor(props: TimerProps) {
 		super(props);
@@ -68,12 +70,12 @@ class TimedMultichoiceQuestion extends MultichoiceQuestion {
 		return (
 			<React.Fragment>
 				<div className="header-controls">
-					<button className="back-nav" onClick={this.props.navigateBack}><img src="images/ic-back.svg" /></button>
+					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl('ic-back.svg') } /></button>
 					<Timer parent={this.props.pageIndex} pause={!this.props.isDisplayed} time={quizTimerTime} callback={this.onSelect.bind(this, null, -1)}/>
 					<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
 				</div>
 				<p className="title">{this.props.title}</p>
-				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src='images/kin-coin.svg' />{ Number(this.props.rewardValue) }</span> </div>
+				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } />{ Number(this.props.rewardValue) }</span> </div>
 			</React.Fragment>
 		);
 	}

From 1e57fce6345be36089549498e90da055dc7ae77b Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Sun, 5 May 2019 15:16:04 +0300
Subject: [PATCH 08/30] images paths fix

---
 scripts/src/ui/page/earnThankYou.tsx               | 4 ++--
 scripts/src/ui/page/multichoice.question.tsx       | 4 ++--
 scripts/src/ui/page/successBasedThankYou.tsx       | 4 ++--
 scripts/src/ui/page/timed.multichoice.question.tsx | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/scripts/src/ui/page/earnThankYou.tsx b/scripts/src/ui/page/earnThankYou.tsx
index 23dd738..29b941d 100644
--- a/scripts/src/ui/page/earnThankYou.tsx
+++ b/scripts/src/ui/page/earnThankYou.tsx
@@ -26,10 +26,10 @@ export class EarnThankYou extends React.Component<EarnThankYouProps> {
 			<BasePage className="earnThankYou">
 				<div className="text">
 					<div>Yay! You've earned</div>
-					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } /><span>{this.props.amount}</span></span>
+					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin') } /><span>{this.props.amount}</span></span>
 				</div>
 				<div className={"footer"}>
-					<img src={ getImageUrl('cheering-hands.svg') } className="cheering-hands"/>
+					<img src={ getImageUrl('cheering-hands') } className="cheering-hands"/>
 				</div>
 			</BasePage>
 		);
diff --git a/scripts/src/ui/page/multichoice.question.tsx b/scripts/src/ui/page/multichoice.question.tsx
index 6f899ae..9851fed 100644
--- a/scripts/src/ui/page/multichoice.question.tsx
+++ b/scripts/src/ui/page/multichoice.question.tsx
@@ -61,12 +61,12 @@ export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMu
 		return (
 			<React.Fragment>
 				<div className="header-controls">
-					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl('ic-back.svg') } /></button>
+					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl('ic-back') } /></button>
 					<span></span>
 					<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
 				</div>
 				<span className="title">{this.props.title}</span>
-				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } />{ Number(this.props.rewardValue) }</span> </div>
+				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin') } />{ Number(this.props.rewardValue) }</span> </div>
 			</React.Fragment>
 		);
 	}
diff --git a/scripts/src/ui/page/successBasedThankYou.tsx b/scripts/src/ui/page/successBasedThankYou.tsx
index 0123f3e..f9c89be 100644
--- a/scripts/src/ui/page/successBasedThankYou.tsx
+++ b/scripts/src/ui/page/successBasedThankYou.tsx
@@ -48,10 +48,10 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 				<div className="text">
 					<h1 className={ "" }>Better luck next time!</h1>
 					<h2>you've earned:</h2>
-					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } /><span>1</span></span>
+					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin') } /><span>1</span></span>
 				</div>
 				<div className="footer">
-					<img src={ getImageUrl('cheering-hands.svg') } className="cheering-hands"/>
+					<img src={ getImageUrl('cheering-hands') } className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
diff --git a/scripts/src/ui/page/timed.multichoice.question.tsx b/scripts/src/ui/page/timed.multichoice.question.tsx
index 4c9bc20..b64220f 100644
--- a/scripts/src/ui/page/timed.multichoice.question.tsx
+++ b/scripts/src/ui/page/timed.multichoice.question.tsx
@@ -70,12 +70,12 @@ class TimedMultichoiceQuestion extends MultichoiceQuestion {
 		return (
 			<React.Fragment>
 				<div className="header-controls">
-					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl('ic-back.svg') } /></button>
+					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl('ic-back') } /></button>
 					<Timer parent={this.props.pageIndex} pause={!this.props.isDisplayed} time={quizTimerTime} callback={this.onSelect.bind(this, null, -1)}/>
 					<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
 				</div>
 				<p className="title">{this.props.title}</p>
-				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } />{ Number(this.props.rewardValue) }</span> </div>
+				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin') } />{ Number(this.props.rewardValue) }</span> </div>
 			</React.Fragment>
 		);
 	}

From 2f36c0df0b4f199a4ba7a0c9f90c8f854bbf5a9b Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Sun, 5 May 2019 17:20:34 +0300
Subject: [PATCH 09/30] title font-weight increased to 500, fixed
 updateJsonSchema script

---
 styles/src/page/multichoice.question.styl |  1 +
 updateJsonSchema.js                       | 26 +++++++++++++++++++----
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/styles/src/page/multichoice.question.styl b/styles/src/page/multichoice.question.styl
index 25f1bb0..44700d6 100644
--- a/styles/src/page/multichoice.question.styl
+++ b/styles/src/page/multichoice.question.styl
@@ -15,6 +15,7 @@
 			display: inline-block
 			width: 72vw
 			margin: 0.1rem auto 8%
+			font-weight: 500
 		button.back-nav
 			-webkit-appearance: none
 			border: none
diff --git a/updateJsonSchema.js b/updateJsonSchema.js
index 72d9632..9a25ac0 100644
--- a/updateJsonSchema.js
+++ b/updateJsonSchema.js
@@ -1,9 +1,27 @@
 var offer_contents = (await OfferContent.find())
 
-async function updateOfferContents (type, pageTypeNum) {
+async function updatePolls () {
 	for (var i = 0; i < offer_contents.length; i++) {
 		var oc = offer_contents[i];
-		if (oc.contentType !== type) { continue; }; // I divided polls and quizzes to two separate calls
+		var pageTypeNum = 0;
+		if (oc.contentType !== 'poll') { continue; }; // I divided polls and quizzes to two separate calls
+		var content = JSON.parse(oc.content);
+		content.pages.forEach(page => {
+			if (page.type !== pageTypeNum) { return false; }
+			page.rewardText = page.title.replace(/ \${amount}.*/, '');
+			page.rewardValue = '${amount}';
+			page.title = '';
+		});
+		oc.content = JSON.stringify(content);
+		await oc.save();
+	}
+}
+
+async function updateQuizzes () {
+	for (var i = 0; i < offer_contents.length; i++) {
+		var oc = offer_contents[i];
+		var pageTypeNum = 3;
+		if (oc.contentType !== 'quiz') { continue; }; // I divided polls and quizzes to two separate calls
 		var content = JSON.parse(oc.content);
 		content.pages.forEach(page => {
 			if (page.type !== pageTypeNum) { return false; }
@@ -16,5 +34,5 @@ async function updateOfferContents (type, pageTypeNum) {
 	}
 }
 
-updateOfferContents('poll', 0);
-updateOfferContents('quiz', 3);
\ No newline at end of file
+await updatePolls();
+await updateQuizzes();
\ No newline at end of file

From f280c2fb999e23507e89ae4847f7ec634e24d92a Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Tue, 7 May 2019 11:00:55 +0300
Subject: [PATCH 10/30] first draft

---
 html/index.html                   | 124 +++++++++++++++---------------
 styles/src/page/imageAndText.styl |  16 ++--
 updateJsonSchema.js               |   6 +-
 3 files changed, 74 insertions(+), 72 deletions(-)

diff --git a/html/index.html b/html/index.html
index 63a0287..c4876d9 100644
--- a/html/index.html
+++ b/html/index.html
@@ -31,75 +31,75 @@
 					jsonData = {
 						pages: [
 							//*** Tutorial ***//
-							// {
-							// 	type: PageType.ImageAndText,
-							// 	id: "ASsdgASD#$5F",
-							// 	image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinlogoTut%403x.png",
-							// 	title: "What is Kin?",
-							// 	bodyHtml: "Kin is a new currency for use in everyday digital services. In our Marketplace you\’ll be able to earn Kin by completing tasks and spend Kin on top brands",
-							// 	footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
-							// 	buttonText: "Next",
-							// },
-							// {
-							// 	id: "3e#$5F",
-							// 	type: PageType.ImageAndText,
-							// 	image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinMarketplaceIcon%403x.png",
-							// 	title: "Kin Marketplace",
-							// 	bodyHtml: "The Kin Marketplace experience provides you with a core wallet functionally which includes a place to view your balance as well as incoming/outgoing payments. The Marketplace is a home base where you can engage in the earn/spend opportunities.",
-							// 	footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
-							// 	buttonText: "Next",
-							// },
-							// {
-							// 	id: "ASDFASD#$5F",
-							// 	type: PageType.ImageAndText,
-							// 	image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/walletsIcon%403x.png",
-							// 	title: "How to earn/spend Kin?",
-							// 	bodyHtml: "You can earn Kin by investing a little time to complete tasks such as answering short surveys, watching a video or reading a tutorial just like this one.",
-							// 	footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
-							// 	buttonText: "Got It",
-							// },
-							// {
-							// 	type: PageType.EarnThankYou,
-							//    description: "4,500"
-							// },
-							//
-							//*** Poll ***//
 							{
-								type: PageType.FullPageMultiChoice,
-								title: "Who do you primarily chat with on Kik?",
-								rewardText: "Finish the poll to earn",
-								rewardValue: 6000,
-								question: {
-									id: "G@#$",
-									answers: [
-										"New friends I’ve met on Kik",
-										"Friends I’ve met elsewhere online",
-										"Friends I know from real life",
-										"An equal mix of all three!",
-										"An equal mix of all four!",
-									],
-								},
+								id: "ASsdgASD#$5F",
+								type: PageType.ImageAndText,
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinlogoTut%403x.png",
+								title: "What is Kin?",
+								bodyHtml: "Kin is a new currency for use in everyday digital services. In our Marketplace you\’ll be able to earn Kin by completing tasks and spend Kin on top brands",
+								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								buttonText: "Next",
+							},
+							{
+								id: "3e#$5F",
+								type: PageType.ImageAndText,
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinMarketplaceIcon%403x.png",
+								title: "Kin Marketplace",
+								bodyHtml: "The Kin Marketplace experience provides you with a core wallet functionally which includes a place to view your balance as well as incoming/outgoing payments. The Marketplace is a home base where you can engage in the earn/spend opportunities.",
+								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								buttonText: "Next",
 							},
 							{
-								type: PageType.FullPageMultiChoice,
-								title: "Who do you primarily chat with on Kik?",
-								rewardText: "Finish the poll to earn",
-								rewardValue: 6000,
-								question: {
-									id: "G@#$",
-									answers: [
-										"New friends I’ve met on Kik",
-										"Friends I’ve met elsewhere online",
-										"Friends I know from real life",
-										"An equal mix of all three!",
-										"An equal mix of all four!",
-									],
-								},
+								id: "ASDFASD#$5F",
+								type: PageType.ImageAndText,
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/walletsIcon%403x.png",
+								title: "How to earn/spend Kin?",
+								bodyHtml: "You can earn Kin by investing a little time to complete tasks such as answering short surveys, watching a video or reading a tutorial just like this one.",
+								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								buttonText: "Got It",
 							},
 							{
 								type: PageType.EarnThankYou,
-								description: "4,500"
+							   description: "4,500"
 							},
+							//
+							//*** Poll ***//
+							// {
+							// 	type: PageType.FullPageMultiChoice,
+							// 	title: "Who do you primarily chat with on Kik?",
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "G@#$",
+							// 		answers: [
+							// 			"New friends I’ve met on Kik",
+							// 			"Friends I’ve met elsewhere online",
+							// 			"Friends I know from real life",
+							// 			"An equal mix of all three!",
+							// 			"An equal mix of all four!",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.FullPageMultiChoice,
+							// 	title: "Who do you primarily chat with on Kik?",
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "G@#$",
+							// 		answers: [
+							// 			"New friends I’ve met on Kik",
+							// 			"Friends I’ve met elsewhere online",
+							// 			"Friends I know from real life",
+							// 			"An equal mix of all three!",
+							// 			"An equal mix of all four!",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.EarnThankYou,
+							// 	description: "4,500"
+							// },
 
 							//*** Quiz ***//
 							// {
diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index 1a503f0..dd73584 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -10,39 +10,41 @@ $text-font-size()
 	font-roboto()
 
 	.header
-		padding 5vh 0 5vh
+		padding 5vh 0 3vh
 		flex-box(column)
 		min-height 22vh
+		border none
 		img
 			height: 31.7vw
 			margin: 0 auto 0
 		.title
 			font-roboto()
-			color: $deep-sky-blue
+			color: #f9f9f9
 			margin: 3vh auto 0
 			letter-spacing: -0.5px
-			font-size 5.6vw
+			font-size 1.25rem
 			text-align center
 	.body
 		flex-box(column)
 		height: 36vh
-		margin 5vw auto 0
+		margin 0 auto 0
 		font-roboto()
+		font-weight 300
 		line-height: 1.7
 		$text-font-size()
-		color $blue-grey
+		color #f9f9f9
 		width 70vw
 		text-align center
 	.footer
 		margin: auto auto 3vh
 		text-align: center
 		$text-font-size()
-		color $blue-grey
+		color #f9f9f9
 	.btn
 		btn()
 		border-width 0
 		font-roboto()
 		color white
-		background-color $deep-sky-blue
+		background-color $kin-purple
 		margin: 0 auto 5vw
 
diff --git a/updateJsonSchema.js b/updateJsonSchema.js
index 9a25ac0..a98f333 100644
--- a/updateJsonSchema.js
+++ b/updateJsonSchema.js
@@ -8,9 +8,8 @@ async function updatePolls () {
 		var content = JSON.parse(oc.content);
 		content.pages.forEach(page => {
 			if (page.type !== pageTypeNum) { return false; }
-			page.rewardText = page.title.replace(/ \${amount}.*/, '');
+			page.rewardText = 'Complete the poll to earn'
 			page.rewardValue = '${amount}';
-			page.title = '';
 		});
 		oc.content = JSON.stringify(content);
 		await oc.save();
@@ -25,7 +24,8 @@ async function updateQuizzes () {
 		var content = JSON.parse(oc.content);
 		content.pages.forEach(page => {
 			if (page.type !== pageTypeNum) { return false; }
-			page.rewardText = page.description.replace(/ \${amount}.*/, '');
+			page.title = page.description.replace(/ \${amount}.*/, '');
+			page.rewardText = 'Complete the quiz to earn'
 			page.rewardValue = '${amount}';
 			page.description = '';
 		});

From 7999cae9ccd530cb989e417b71a2355b6f5d04b2 Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Tue, 7 May 2019 11:21:50 +0300
Subject: [PATCH 11/30] PR fixes

---
 styles/src/page/earnThankYou.styl | 45 -------------------------------
 updateJsonSchema.js               | 18 ++++++-------
 2 files changed, 9 insertions(+), 54 deletions(-)

diff --git a/styles/src/page/earnThankYou.styl b/styles/src/page/earnThankYou.styl
index 9360599..67c0855 100644
--- a/styles/src/page/earnThankYou.styl
+++ b/styles/src/page/earnThankYou.styl
@@ -45,48 +45,3 @@
 				width: 100%
 				left: 0
 				bottom: 0
-		/* .diamonds
-			width: 7vw;
-		.coins
-			bottom: 0
-			left: 0
-			width: 100%
-		.sparks
-			bottom: 0
-			left: 0
-			width: 100%
-			object-fit: contain
-		.diamond-l-1
-			left: 1vw;
-			bottom: 9.4vw;
-		.diamond-l-2
-			left: 11vw;
-			bottom: 19vw;
-		.diamond-l-3
-			left: 18vw;
-			bottom: 30vw;
-			width: 10vw
-		.diamond-l-4
-			left: 39vw;
-			bottom: 28vw;
-		.diamond-c-1
-			left: 37.5vw;
-			bottom: 6vw;
-		.diamond-c-2
-			left: 53vw;
-			bottom: 17vw;
-			width: 8vw
-		.diamond-r-3
-			left: 68.3vw;
-			bottom: 22.3vw;
-			width: 8.3vw
-		.diamond-r-2
-			left: 83vw;
-			bottom: 25vw;
-			width: 9.1vw
-		.diamond-r-1
-			left: 84vw;
-			bottom: 13.3vw;
-			width: 8.2vw */
-
-
diff --git a/updateJsonSchema.js b/updateJsonSchema.js
index 9a25ac0..4da70c2 100644
--- a/updateJsonSchema.js
+++ b/updateJsonSchema.js
@@ -1,11 +1,11 @@
-var offer_contents = (await OfferContent.find())
+const offer_contents = (await OfferContent.find())
 
 async function updatePolls () {
-	for (var i = 0; i < offer_contents.length; i++) {
-		var oc = offer_contents[i];
-		var pageTypeNum = 0;
+	for (const i = 0; i < offer_contents.length; i++) {
+		const oc = offer_contents[i];
+		const pageTypeNum = 0;
 		if (oc.contentType !== 'poll') { continue; }; // I divided polls and quizzes to two separate calls
-		var content = JSON.parse(oc.content);
+		const content = JSON.parse(oc.content);
 		content.pages.forEach(page => {
 			if (page.type !== pageTypeNum) { return false; }
 			page.rewardText = page.title.replace(/ \${amount}.*/, '');
@@ -18,11 +18,11 @@ async function updatePolls () {
 }
 
 async function updateQuizzes () {
-	for (var i = 0; i < offer_contents.length; i++) {
-		var oc = offer_contents[i];
-		var pageTypeNum = 3;
+	for (const i = 0; i < offer_contents.length; i++) {
+		const oc = offer_contents[i];
+		const pageTypeNum = 3;
 		if (oc.contentType !== 'quiz') { continue; }; // I divided polls and quizzes to two separate calls
-		var content = JSON.parse(oc.content);
+		const content = JSON.parse(oc.content);
 		content.pages.forEach(page => {
 			if (page.type !== pageTypeNum) { return false; }
 			page.rewardText = page.description.replace(/ \${amount}.*/, '');

From a513f06daa4ef81cdf37335ac71babca63d8ec3e Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Tue, 7 May 2019 17:01:15 +0300
Subject: [PATCH 12/30] tutorial page naviagation preparations

---
 scripts/src/ui/page/imageAndText.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/scripts/src/ui/page/imageAndText.tsx b/scripts/src/ui/page/imageAndText.tsx
index bd270ac..ae4a9db 100644
--- a/scripts/src/ui/page/imageAndText.tsx
+++ b/scripts/src/ui/page/imageAndText.tsx
@@ -1,18 +1,23 @@
 import * as React from "react";
 import BasePage from "./base";
+import { CommonProps } from "../../app";
 
 import "../../../../styles/src/page/imageAndText.styl";
 
-export interface ImageAndTextProps {
+export interface ImageAndTextProps extends CommonProps {
 	image: string;
-	title: string;
-	onBtnClick?: () => void;
-	btnText: string;
+	onBtnClick: (answerData: any) => void;
 	footerHtml: string;
+	bodyHtml: string;
+	buttonText: string;
 }
 
-class ImageAndText extends React.Component<any, ImageAndTextProps> {
+class ImageAndText extends React.Component<ImageAndTextProps> {
 	public render() {
+		const currentPage = this.props.pageIndex + 1;
+		/* the list is 0 based */
+		const totalQuestionPages = this.props.totalPagesCount - 1;
+		/* the list contains a Thank you page --- a better solution is better */
 		return (<BasePage className="imageAndText">
 			<div className="header">
 				<img src={this.props.image}/>

From 5fb0587e6333a7bb5dd4ad83c669e542fcdcd33b Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Wed, 8 May 2019 11:35:39 +0300
Subject: [PATCH 13/30] PR fix

---
 updateJsonSchema.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/updateJsonSchema.js b/updateJsonSchema.js
index 4da70c2..6f31dbb 100644
--- a/updateJsonSchema.js
+++ b/updateJsonSchema.js
@@ -1,7 +1,7 @@
 const offer_contents = (await OfferContent.find())
 
 async function updatePolls () {
-	for (const i = 0; i < offer_contents.length; i++) {
+	for (let i = 0; i < offer_contents.length; i++) {
 		const oc = offer_contents[i];
 		const pageTypeNum = 0;
 		if (oc.contentType !== 'poll') { continue; }; // I divided polls and quizzes to two separate calls
@@ -18,7 +18,7 @@ async function updatePolls () {
 }
 
 async function updateQuizzes () {
-	for (const i = 0; i < offer_contents.length; i++) {
+	for (let i = 0; i < offer_contents.length; i++) {
 		const oc = offer_contents[i];
 		const pageTypeNum = 3;
 		if (oc.contentType !== 'quiz') { continue; }; // I divided polls and quizzes to two separate calls

From e61117159a3af2d489b002ef9b548b7bdc057ddf Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Wed, 8 May 2019 17:33:27 +0300
Subject: [PATCH 14/30] navigation

---
 scripts/src/ui/page/imageAndText.tsx |  7 +++++++
 styles/src/page/imageAndText.styl    | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/scripts/src/ui/page/imageAndText.tsx b/scripts/src/ui/page/imageAndText.tsx
index ae4a9db..a595435 100644
--- a/scripts/src/ui/page/imageAndText.tsx
+++ b/scripts/src/ui/page/imageAndText.tsx
@@ -12,6 +12,8 @@ export interface ImageAndTextProps extends CommonProps {
 	buttonText: string;
 }
 
+const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
+
 class ImageAndText extends React.Component<ImageAndTextProps> {
 	public render() {
 		const currentPage = this.props.pageIndex + 1;
@@ -19,6 +21,11 @@ class ImageAndText extends React.Component<ImageAndTextProps> {
 		const totalQuestionPages = this.props.totalPagesCount - 1;
 		/* the list contains a Thank you page --- a better solution is better */
 		return (<BasePage className="imageAndText">
+			<div className="header-controls">
+				<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl('ic-back') } /></button>
+				<span></span>
+				<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
+			</div>
 			<div className="header">
 				<img src={this.props.image}/>
 				<div className="title">{this.props.title}</div>
diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index dd73584..36a29f8 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -9,6 +9,24 @@ $text-font-size()
 	height: 100%
 	font-roboto()
 
+	.header-controls
+		flex-box()
+		justify-content: space-between
+		align-items: center
+		font-size: 6.2vw
+	.title
+		display: inline-block
+		width: 72vw
+		margin: 0.1rem auto 8%
+		font-weight: 500
+	button.back-nav
+		-webkit-appearance: none
+		border: none
+		background: none
+		padding: 0
+		img
+			width: 2rem
+
 	.header
 		padding 5vh 0 3vh
 		flex-box(column)

From 30f83c33f1f3e33994329d987ab2bf2aaf2fd653 Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Sun, 12 May 2019 10:49:54 +0300
Subject: [PATCH 15/30] styles fixes

---
 html/index.html                           |  9 ++++++---
 scripts/src/ui/page/imageAndText.tsx      |  4 +++-
 styles/src/page/imageAndText.styl         | 22 ++++++++++++++++++++++
 styles/src/page/multichoice.question.styl |  2 +-
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/html/index.html b/html/index.html
index c4876d9..ca3fe41 100644
--- a/html/index.html
+++ b/html/index.html
@@ -37,7 +37,8 @@
 								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinlogoTut%403x.png",
 								title: "What is Kin?",
 								bodyHtml: "Kin is a new currency for use in everyday digital services. In our Marketplace you\’ll be able to earn Kin by completing tasks and spend Kin on top brands",
-								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								rewardText: "Finish the tutorial and earn",
+								rewardValue: 6000,
 								buttonText: "Next",
 							},
 							{
@@ -46,7 +47,8 @@
 								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinMarketplaceIcon%403x.png",
 								title: "Kin Marketplace",
 								bodyHtml: "The Kin Marketplace experience provides you with a core wallet functionally which includes a place to view your balance as well as incoming/outgoing payments. The Marketplace is a home base where you can engage in the earn/spend opportunities.",
-								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								rewardText: "Finish the tutorial and earn",
+								rewardValue: 6000,
 								buttonText: "Next",
 							},
 							{
@@ -55,7 +57,8 @@
 								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/walletsIcon%403x.png",
 								title: "How to earn/spend Kin?",
 								bodyHtml: "You can earn Kin by investing a little time to complete tasks such as answering short surveys, watching a video or reading a tutorial just like this one.",
-								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								rewardText: "Finish the tutorial and earn",
+								rewardValue: 6000,
 								buttonText: "Got It",
 							},
 							{
diff --git a/scripts/src/ui/page/imageAndText.tsx b/scripts/src/ui/page/imageAndText.tsx
index a595435..1d1653d 100644
--- a/scripts/src/ui/page/imageAndText.tsx
+++ b/scripts/src/ui/page/imageAndText.tsx
@@ -31,7 +31,9 @@ class ImageAndText extends React.Component<ImageAndTextProps> {
 				<div className="title">{this.props.title}</div>
 			</div>
 			<div className="body" dangerouslySetInnerHTML={{ __html: this.props.bodyHtml }}></div>
-			<div className="footer" dangerouslySetInnerHTML={{ __html: this.props.footerHtml }}></div>
+			<div className="footer">
+				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin') } />{ Number(this.props.rewardValue) }</span> </div>
+			</div>
 			<button className={"btn " + (!this.props.onBtnClick ? "hidden" : "")}
 					onClick={this.props.onBtnClick.bind(this.props, { })}>{this.props.buttonText}</button>
 		</BasePage>);
diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index 36a29f8..8ec3958 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -10,6 +10,8 @@ $text-font-size()
 	font-roboto()
 
 	.header-controls
+		width: 86%
+		margin: 7% auto 0
 		flex-box()
 		justify-content: space-between
 		align-items: center
@@ -58,6 +60,26 @@ $text-font-size()
 		text-align: center
 		$text-font-size()
 		color #f9f9f9
+
+		.description
+			margin: 3vh auto
+			font-size: .9rem
+			.description-price
+				display: -webkit-inline-flex
+				display: -moz-inline-flex
+				display: -ms-inline-flex
+				display: -o-inline-flex
+				display: inline-flex
+				align-items: center
+				vertical-align: middle
+				color: $kin-purple
+				line-height: 90%
+				img
+					width: 7px
+					margin-right: 3px
+				.full-width-plus
+					font-size: .8rem
+					font-weight bold
 	.btn
 		btn()
 		border-width 0
diff --git a/styles/src/page/multichoice.question.styl b/styles/src/page/multichoice.question.styl
index 44700d6..7262d27 100644
--- a/styles/src/page/multichoice.question.styl
+++ b/styles/src/page/multichoice.question.styl
@@ -5,7 +5,7 @@
 	font-roboto()
 	.header
 		width: 86%
-		margin: 10% auto 0
+		margin: 7% auto 0
 		.header-controls
 			flex-box()
 			justify-content: space-between

From 2ca3777a58a79bf23fd63914a0888ee370aa6da4 Mon Sep 17 00:00:00 2001
From: Victor <doc999tor@gmail.com>
Date: Sun, 12 May 2019 18:07:54 +0300
Subject: [PATCH 16/30] PR fixes

---
 html/index.html                               | 190 +++++++++---------
 scripts/src/app.tsx                           |  40 ++--
 scripts/src/ui/page/earnThankYou.tsx          |   4 +-
 scripts/src/ui/page/multichoice.question.tsx  |   6 +-
 scripts/src/ui/page/successBasedThankYou.tsx  |  18 +-
 .../ui/page/timed.multichoice.question.tsx    |   8 +-
 updateJsonSchema.js                           |  11 +-
 7 files changed, 145 insertions(+), 132 deletions(-)

diff --git a/html/index.html b/html/index.html
index 63a0287..fc3e7d7 100644
--- a/html/index.html
+++ b/html/index.html
@@ -64,119 +64,119 @@
 							// },
 							//
 							//*** Poll ***//
-							{
-								type: PageType.FullPageMultiChoice,
-								title: "Who do you primarily chat with on Kik?",
-								rewardText: "Finish the poll to earn",
-								rewardValue: 6000,
-								question: {
-									id: "G@#$",
-									answers: [
-										"New friends I’ve met on Kik",
-										"Friends I’ve met elsewhere online",
-										"Friends I know from real life",
-										"An equal mix of all three!",
-										"An equal mix of all four!",
-									],
-								},
-							},
-							{
-								type: PageType.FullPageMultiChoice,
-								title: "Who do you primarily chat with on Kik?",
-								rewardText: "Finish the poll to earn",
-								rewardValue: 6000,
-								question: {
-									id: "G@#$",
-									answers: [
-										"New friends I’ve met on Kik",
-										"Friends I’ve met elsewhere online",
-										"Friends I know from real life",
-										"An equal mix of all three!",
-										"An equal mix of all four!",
-									],
-								},
-							},
-							{
-								type: PageType.EarnThankYou,
-								description: "4,500"
-							},
-
-							//*** Quiz ***//
-							// {
-							// 	type: PageType.TimedFullPageMultiChoice,
-							// 	title: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
-							// 	amount: 15,
-							// 	rightAnswer: 3,
-							// 	rewardText: "Finish the poll to earn",
-							// 	rewardValue: 6000,
-							// 	question: {
-							// 		id: "erthwt",
-							// 		answers: [
-							// 			"Radonite",
-							// 			"Argonite",
-							// 			"Carbonite",
-							// 			"Kryptonite",
-							// 			"Kryptonite-2",
-							// 		],
-							// 	},
-							// },
 							// {
-							// 	type: PageType.TimedFullPageMultiChoice,
-							// 	title: "How much wood could a woodchuck chuck?",
-							// 	amount: 15,
-							// 	rightAnswer: 2,
+							// 	type: PageType.FullPageMultiChoice,
+							// 	title: "Who do you primarily chat with on Kik?",
 							// 	rewardText: "Finish the poll to earn",
 							// 	rewardValue: 6000,
 							// 	question: {
-							// 		id: "question-1",
+							// 		id: "question_id_1 - G@#$",
 							// 		answers: [
-							// 			"Not a lot, they are very small",
-							// 			"A woodchuck would chuck as much wood as a woodchuck could chuck",
-							// 			"320 kg",
-							// 			"361.9237001 cm3",
-							// 			"361.9237001 cm3-2",
+							// 			"New friends I’ve met on Kik",
+							// 			"Friends I’ve met elsewhere online",
+							// 			"Friends I know from real life",
+							// 			"An equal mix of all three!",
+							// 			"An equal mix of all four!",
 							// 		],
 							// 	},
 							// },
 							// {
-							// 	type: PageType.TimedFullPageMultiChoice,
-							// 	title: "Yes?",
-							// 	amount: 20,
-							// 	rightAnswer: 3,
+							// 	type: PageType.FullPageMultiChoice,
+							// 	title: "Who do you primarily chat with on Kik?",
 							// 	rewardText: "Finish the poll to earn",
 							// 	rewardValue: 6000,
 							// 	question: {
-							// 		id: "question-2",
+							// 		id: "question_id_2 - G@#$",
 							// 		answers: [
-							// 			"Of course",
-							// 			"no",
-							// 			"320 kg",
-							// 			"Camel",
-							// 			"Camel-2",
+							// 			"New friends I’ve met on Kik",
+							// 			"Friends I’ve met elsewhere online",
+							// 			"Friends I know from real life",
+							// 			"An equal mix of all three!",
+							// 			"An equal mix of all four!",
 							// 		],
 							// 	},
 							// },
 							// {
-							// 	type: PageType.TimedFullPageMultiChoice,
-							// 	title: "Color?",
-							// 	amount: 15,
-							// 	rightAnswer: 4,
-							// 	rewardText: "Finish the poll to earn",
-							// 	rewardValue: 6000,
-							// 	question: {
-							// 		id: "question-3",
-							// 		answers: [
-							// 			"Yellow",
-							// 			"Red",
-							// 			"Crimson",
-							// 			"Dorothy",
-							// 			"Dorothy-2",
-							// 		],
-							// 	},
-							// },
-							// {
-							// 	type: PageType.SuccessBasedThankYou,
+							// 	type: PageType.EarnThankYou,
+							// 	description: "4,500"
 							// },
+
+							//*** Quiz ***//
+							{
+								type: PageType.TimedFullPageMultiChoice,
+								title: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
+								amount: 15,
+								rightAnswer: 3,
+								rewardText: "Finish the poll to earn",
+								rewardValue: 6000,
+								question: {
+									id: "erthwt",
+									answers: [
+										"Radonite",
+										"Argonite",
+										"Carbonite",
+										"Kryptonite",
+										"Kryptonite-2",
+									],
+								},
+							},
+							{
+								type: PageType.TimedFullPageMultiChoice,
+								title: "How much wood could a woodchuck chuck?",
+								amount: 15,
+								rightAnswer: 2,
+								rewardText: "Finish the poll to earn",
+								rewardValue: 6000,
+								question: {
+									id: "question-1",
+									answers: [
+										"Not a lot, they are very small",
+										"A woodchuck would chuck as much wood as a woodchuck could chuck",
+										"320 kg",
+										"361.9237001 cm3",
+										"361.9237001 cm3-2",
+									],
+								},
+							},
+							{
+								type: PageType.TimedFullPageMultiChoice,
+								title: "Yes?",
+								amount: 20,
+								rightAnswer: 3,
+								rewardText: "Finish the poll to earn",
+								rewardValue: 6000,
+								question: {
+									id: "question-2",
+									answers: [
+										"Of course",
+										"no",
+										"320 kg",
+										"Camel",
+										"Camel-2",
+									],
+								},
+							},
+							{
+								type: PageType.TimedFullPageMultiChoice,
+								title: "Color?",
+								amount: 15,
+								rightAnswer: 4,
+								rewardText: "Finish the poll to earn",
+								rewardValue: 6000,
+								question: {
+									id: "question-3",
+									answers: [
+										"Yellow",
+										"Red",
+										"Crimson",
+										"Dorothy",
+										"Dorothy-2",
+									],
+								},
+							},
+							{
+								type: PageType.SuccessBasedThankYou,
+							},
 						]
 					}
 				}
diff --git a/scripts/src/app.tsx b/scripts/src/app.tsx
index e3511c7..174999f 100644
--- a/scripts/src/app.tsx
+++ b/scripts/src/app.tsx
@@ -103,42 +103,50 @@ class App extends React.Component {
 	}
 
 	private onPageCompleteHandler(answerData: any) {
-		this.setState(Object.assign(this.state, {
-			data: Object.assign(this.state.data, answerData),
-		}));
-
-		this.navigate(+1);
-	}
+		const navigationStep = 1;
+		const newPageIndex = this.navigate(navigationStep);
 
-	private navigateBack () {
-		this.navigate(-1);
-	}
+		const allData: any = Object.assign({}, this.state.data, answerData);  // todo pollyfill Object.assign
 
-	private navigate (pageStep: number) {
-		const newPageIndex = this.state.currentPage + pageStep;
 		const isComplete = this.state.currentPage === (this.state.pages.length - 1);
-		const isShouldExit = newPageIndex < 0;
-		console.log("current: %s, new page: %s, isComplete: %s", this.state.currentPage, newPageIndex, isComplete);
 		if (isComplete) {
-			if (Object.keys(this.state.data)) {
+			if (Object.keys(allData)) {
 				console.log("submit " + JSON.stringify(this.state.data));
 				bridge.submitResult(this.state.data);
 				bridge.close();
 			}
 			return;
 		}
+		this.setState({
+			currentPage: newPageIndex,
+			data: allData,
+			isComplete,
+		});
+	}
+
+	private navigateBack() {
+		const navigationStep = -1;
+		const newPageIndex = this.navigate(navigationStep);
 
-		if (isShouldExit) {
+		const shouldExit = newPageIndex < 0;
+		if (shouldExit) {
 			console.log("exit " + JSON.stringify(this.state.data));
 			bridge.close();
 			return;
 		}
 
-		this.setState(Object.assign(this.state, {
+		this.setState(Object.assign({}, this.state, {
 			currentPage: newPageIndex,
 		}));
 	}
 
+	private navigate(pageStep: number): number {
+		const newPageIndex = this.state.currentPage + pageStep;
+		console.log("current: %s, new page: %s", this.state.currentPage, newPageIndex);
+
+		return newPageIndex;
+	}
+
 	private updateSharedData(data: any) {
 		Object.assign(sharedPageData, data);
 	}
diff --git a/scripts/src/ui/page/earnThankYou.tsx b/scripts/src/ui/page/earnThankYou.tsx
index 29b941d..a3f086b 100644
--- a/scripts/src/ui/page/earnThankYou.tsx
+++ b/scripts/src/ui/page/earnThankYou.tsx
@@ -26,10 +26,10 @@ export class EarnThankYou extends React.Component<EarnThankYouProps> {
 			<BasePage className="earnThankYou">
 				<div className="text">
 					<div>Yay! You've earned</div>
-					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin') } /><span>{this.props.amount}</span></span>
+					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>{this.props.amount}</span></span>
 				</div>
 				<div className={"footer"}>
-					<img src={ getImageUrl('cheering-hands') } className="cheering-hands"/>
+					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
 				</div>
 			</BasePage>
 		);
diff --git a/scripts/src/ui/page/multichoice.question.tsx b/scripts/src/ui/page/multichoice.question.tsx
index 9851fed..3c671ae 100644
--- a/scripts/src/ui/page/multichoice.question.tsx
+++ b/scripts/src/ui/page/multichoice.question.tsx
@@ -61,12 +61,12 @@ export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMu
 		return (
 			<React.Fragment>
 				<div className="header-controls">
-					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl('ic-back') } /></button>
+					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl("ic-back") } /></button>
 					<span></span>
-					<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
+					<div className="pageProgress">{currentPage}/{totalQuestionPages}</div>
 				</div>
 				<span className="title">{this.props.title}</span>
-				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin') } />{ Number(this.props.rewardValue) }</span> </div>
+				<div className="description">{ this.props.rewardText } <span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span> </div>
 			</React.Fragment>
 		);
 	}
diff --git a/scripts/src/ui/page/successBasedThankYou.tsx b/scripts/src/ui/page/successBasedThankYou.tsx
index f9c89be..97ee351 100644
--- a/scripts/src/ui/page/successBasedThankYou.tsx
+++ b/scripts/src/ui/page/successBasedThankYou.tsx
@@ -46,12 +46,12 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<React.Fragment>
 				<div className="text">
-					<h1 className={ "" }>Better luck next time!</h1>
+					<h1>Better luck next time!</h1>
 					<h2>you've earned:</h2>
-					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin') } /><span>1</span></span>
+					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>1</span></span>
 				</div>
 				<div className="footer">
-					<img src={ getImageUrl('cheering-hands') } className="cheering-hands"/>
+					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
@@ -61,12 +61,12 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<React.Fragment>
 				<div className="text">
-					<h1 className={ "" }>Well Done!</h1>
+					<h1>Well Done!</h1>
 					<h2>Yay! You've earned:</h2>
-					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } /><span>{ this.props.sharedData.earnedAmount }</span></span>
+					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
 				<div className="footer">
-					<img src={ getImageUrl('cheering-hands.svg') } className="cheering-hands"/>
+					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
@@ -76,12 +76,12 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<React.Fragment>
 				<div className="text">
-					<h1 className={ "" }>High five!</h1>
+					<h1>High five!</h1>
 					<h2>Yay! You've earned:</h2>
-					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin.svg') } /><span>{ this.props.sharedData.earnedAmount }</span></span>
+					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
 				<div className="footer">
-					<img src={ getImageUrl('cheering-hands.svg') } className="cheering-hands"/>
+					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
diff --git a/scripts/src/ui/page/timed.multichoice.question.tsx b/scripts/src/ui/page/timed.multichoice.question.tsx
index b64220f..5128515 100644
--- a/scripts/src/ui/page/timed.multichoice.question.tsx
+++ b/scripts/src/ui/page/timed.multichoice.question.tsx
@@ -41,7 +41,7 @@ class Timer extends React.Component<TimerProps, TimerState> {
 		);
 	}
 
-	public componentDidMount() {  // First timer won't get componentDidUpdate
+	public componentDidMount() {  // First timer won"t get componentDidUpdate
 		setTimeout(this.updateTime, 1000);
 	}
 
@@ -70,12 +70,12 @@ class TimedMultichoiceQuestion extends MultichoiceQuestion {
 		return (
 			<React.Fragment>
 				<div className="header-controls">
-					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl('ic-back') } /></button>
+					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl("ic-back") } /></button>
 					<Timer parent={this.props.pageIndex} pause={!this.props.isDisplayed} time={quizTimerTime} callback={this.onSelect.bind(this, null, -1)}/>
-					<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
+					<div className="pageProgress">{currentPage}/{totalQuestionPages}</div>
 				</div>
 				<p className="title">{this.props.title}</p>
-				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin') } />{ Number(this.props.rewardValue) }</span> </div>
+				<div className="description">{ this.props.rewardText } <span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span> </div>
 			</React.Fragment>
 		);
 	}
diff --git a/updateJsonSchema.js b/updateJsonSchema.js
index 6f31dbb..c69048c 100644
--- a/updateJsonSchema.js
+++ b/updateJsonSchema.js
@@ -1,6 +1,11 @@
+/**
+ * make console-docker -> .admin -> const offer_contents = (await OfferContent.find())
+ *
+ * @return     {OfferContent[]}  repl can resolve promises
+ */
 const offer_contents = (await OfferContent.find())
 
-async function updatePolls () {
+async function updatePolls() {
 	for (let i = 0; i < offer_contents.length; i++) {
 		const oc = offer_contents[i];
 		const pageTypeNum = 0;
@@ -17,7 +22,7 @@ async function updatePolls () {
 	}
 }
 
-async function updateQuizzes () {
+async function updateQuizzes() {
 	for (let i = 0; i < offer_contents.length; i++) {
 		const oc = offer_contents[i];
 		const pageTypeNum = 3;
@@ -35,4 +40,4 @@ async function updateQuizzes () {
 }
 
 await updatePolls();
-await updateQuizzes();
\ No newline at end of file
+await updateQuizzes();

From 03902ef39032ac990d848bf677cfb73036d188dd Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Tue, 7 May 2019 11:00:55 +0300
Subject: [PATCH 17/30] first draft

---
 html/index.html                   | 216 +++++++++++++++---------------
 styles/src/page/imageAndText.styl |  16 ++-
 updateJsonSchema.js               |   6 +-
 3 files changed, 120 insertions(+), 118 deletions(-)

diff --git a/html/index.html b/html/index.html
index fc3e7d7..c4876d9 100644
--- a/html/index.html
+++ b/html/index.html
@@ -31,37 +31,37 @@
 					jsonData = {
 						pages: [
 							//*** Tutorial ***//
-							// {
-							// 	type: PageType.ImageAndText,
-							// 	id: "ASsdgASD#$5F",
-							// 	image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinlogoTut%403x.png",
-							// 	title: "What is Kin?",
-							// 	bodyHtml: "Kin is a new currency for use in everyday digital services. In our Marketplace you\’ll be able to earn Kin by completing tasks and spend Kin on top brands",
-							// 	footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
-							// 	buttonText: "Next",
-							// },
-							// {
-							// 	id: "3e#$5F",
-							// 	type: PageType.ImageAndText,
-							// 	image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinMarketplaceIcon%403x.png",
-							// 	title: "Kin Marketplace",
-							// 	bodyHtml: "The Kin Marketplace experience provides you with a core wallet functionally which includes a place to view your balance as well as incoming/outgoing payments. The Marketplace is a home base where you can engage in the earn/spend opportunities.",
-							// 	footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
-							// 	buttonText: "Next",
-							// },
-							// {
-							// 	id: "ASDFASD#$5F",
-							// 	type: PageType.ImageAndText,
-							// 	image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/walletsIcon%403x.png",
-							// 	title: "How to earn/spend Kin?",
-							// 	bodyHtml: "You can earn Kin by investing a little time to complete tasks such as answering short surveys, watching a video or reading a tutorial just like this one.",
-							// 	footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
-							// 	buttonText: "Got It",
-							// },
-							// {
-							// 	type: PageType.EarnThankYou,
-							//    description: "4,500"
-							// },
+							{
+								id: "ASsdgASD#$5F",
+								type: PageType.ImageAndText,
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinlogoTut%403x.png",
+								title: "What is Kin?",
+								bodyHtml: "Kin is a new currency for use in everyday digital services. In our Marketplace you\’ll be able to earn Kin by completing tasks and spend Kin on top brands",
+								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								buttonText: "Next",
+							},
+							{
+								id: "3e#$5F",
+								type: PageType.ImageAndText,
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinMarketplaceIcon%403x.png",
+								title: "Kin Marketplace",
+								bodyHtml: "The Kin Marketplace experience provides you with a core wallet functionally which includes a place to view your balance as well as incoming/outgoing payments. The Marketplace is a home base where you can engage in the earn/spend opportunities.",
+								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								buttonText: "Next",
+							},
+							{
+								id: "ASDFASD#$5F",
+								type: PageType.ImageAndText,
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/walletsIcon%403x.png",
+								title: "How to earn/spend Kin?",
+								bodyHtml: "You can earn Kin by investing a little time to complete tasks such as answering short surveys, watching a video or reading a tutorial just like this one.",
+								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								buttonText: "Got It",
+							},
+							{
+								type: PageType.EarnThankYou,
+							   description: "4,500"
+							},
 							//
 							//*** Poll ***//
 							// {
@@ -70,7 +70,7 @@
 							// 	rewardText: "Finish the poll to earn",
 							// 	rewardValue: 6000,
 							// 	question: {
-							// 		id: "question_id_1 - G@#$",
+							// 		id: "G@#$",
 							// 		answers: [
 							// 			"New friends I’ve met on Kik",
 							// 			"Friends I’ve met elsewhere online",
@@ -86,7 +86,7 @@
 							// 	rewardText: "Finish the poll to earn",
 							// 	rewardValue: 6000,
 							// 	question: {
-							// 		id: "question_id_2 - G@#$",
+							// 		id: "G@#$",
 							// 		answers: [
 							// 			"New friends I’ve met on Kik",
 							// 			"Friends I’ve met elsewhere online",
@@ -102,81 +102,81 @@
 							// },
 
 							//*** Quiz ***//
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								title: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
-								amount: 15,
-								rightAnswer: 3,
-								rewardText: "Finish the poll to earn",
-								rewardValue: 6000,
-								question: {
-									id: "erthwt",
-									answers: [
-										"Radonite",
-										"Argonite",
-										"Carbonite",
-										"Kryptonite",
-										"Kryptonite-2",
-									],
-								},
-							},
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								title: "How much wood could a woodchuck chuck?",
-								amount: 15,
-								rightAnswer: 2,
-								rewardText: "Finish the poll to earn",
-								rewardValue: 6000,
-								question: {
-									id: "question-1",
-									answers: [
-										"Not a lot, they are very small",
-										"A woodchuck would chuck as much wood as a woodchuck could chuck",
-										"320 kg",
-										"361.9237001 cm3",
-										"361.9237001 cm3-2",
-									],
-								},
-							},
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								title: "Yes?",
-								amount: 20,
-								rightAnswer: 3,
-								rewardText: "Finish the poll to earn",
-								rewardValue: 6000,
-								question: {
-									id: "question-2",
-									answers: [
-										"Of course",
-										"no",
-										"320 kg",
-										"Camel",
-										"Camel-2",
-									],
-								},
-							},
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								title: "Color?",
-								amount: 15,
-								rightAnswer: 4,
-								rewardText: "Finish the poll to earn",
-								rewardValue: 6000,
-								question: {
-									id: "question-3",
-									answers: [
-										"Yellow",
-										"Red",
-										"Crimson",
-										"Dorothy",
-										"Dorothy-2",
-									],
-								},
-							},
-							{
-								type: PageType.SuccessBasedThankYou,
-							},
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	title: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
+							// 	amount: 15,
+							// 	rightAnswer: 3,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "erthwt",
+							// 		answers: [
+							// 			"Radonite",
+							// 			"Argonite",
+							// 			"Carbonite",
+							// 			"Kryptonite",
+							// 			"Kryptonite-2",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	title: "How much wood could a woodchuck chuck?",
+							// 	amount: 15,
+							// 	rightAnswer: 2,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "question-1",
+							// 		answers: [
+							// 			"Not a lot, they are very small",
+							// 			"A woodchuck would chuck as much wood as a woodchuck could chuck",
+							// 			"320 kg",
+							// 			"361.9237001 cm3",
+							// 			"361.9237001 cm3-2",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	title: "Yes?",
+							// 	amount: 20,
+							// 	rightAnswer: 3,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "question-2",
+							// 		answers: [
+							// 			"Of course",
+							// 			"no",
+							// 			"320 kg",
+							// 			"Camel",
+							// 			"Camel-2",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	title: "Color?",
+							// 	amount: 15,
+							// 	rightAnswer: 4,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "question-3",
+							// 		answers: [
+							// 			"Yellow",
+							// 			"Red",
+							// 			"Crimson",
+							// 			"Dorothy",
+							// 			"Dorothy-2",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.SuccessBasedThankYou,
+							// },
 						]
 					}
 				}
diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index 1a503f0..dd73584 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -10,39 +10,41 @@ $text-font-size()
 	font-roboto()
 
 	.header
-		padding 5vh 0 5vh
+		padding 5vh 0 3vh
 		flex-box(column)
 		min-height 22vh
+		border none
 		img
 			height: 31.7vw
 			margin: 0 auto 0
 		.title
 			font-roboto()
-			color: $deep-sky-blue
+			color: #f9f9f9
 			margin: 3vh auto 0
 			letter-spacing: -0.5px
-			font-size 5.6vw
+			font-size 1.25rem
 			text-align center
 	.body
 		flex-box(column)
 		height: 36vh
-		margin 5vw auto 0
+		margin 0 auto 0
 		font-roboto()
+		font-weight 300
 		line-height: 1.7
 		$text-font-size()
-		color $blue-grey
+		color #f9f9f9
 		width 70vw
 		text-align center
 	.footer
 		margin: auto auto 3vh
 		text-align: center
 		$text-font-size()
-		color $blue-grey
+		color #f9f9f9
 	.btn
 		btn()
 		border-width 0
 		font-roboto()
 		color white
-		background-color $deep-sky-blue
+		background-color $kin-purple
 		margin: 0 auto 5vw
 
diff --git a/updateJsonSchema.js b/updateJsonSchema.js
index c69048c..f373368 100644
--- a/updateJsonSchema.js
+++ b/updateJsonSchema.js
@@ -13,9 +13,8 @@ async function updatePolls() {
 		const content = JSON.parse(oc.content);
 		content.pages.forEach(page => {
 			if (page.type !== pageTypeNum) { return false; }
-			page.rewardText = page.title.replace(/ \${amount}.*/, '');
+			page.rewardText = 'Complete the poll to earn'
 			page.rewardValue = '${amount}';
-			page.title = '';
 		});
 		oc.content = JSON.stringify(content);
 		await oc.save();
@@ -30,7 +29,8 @@ async function updateQuizzes() {
 		const content = JSON.parse(oc.content);
 		content.pages.forEach(page => {
 			if (page.type !== pageTypeNum) { return false; }
-			page.rewardText = page.description.replace(/ \${amount}.*/, '');
+			page.title = page.description.replace(/ \${amount}.*/, '');
+			page.rewardText = 'Complete the quiz to earn'
 			page.rewardValue = '${amount}';
 			page.description = '';
 		});

From f60e9fdba483a9a4ae293353df9618c5b850e8f5 Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Tue, 7 May 2019 17:01:15 +0300
Subject: [PATCH 18/30] tutorial page naviagation preparations

---
 scripts/src/ui/page/imageAndText.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/scripts/src/ui/page/imageAndText.tsx b/scripts/src/ui/page/imageAndText.tsx
index bd270ac..ae4a9db 100644
--- a/scripts/src/ui/page/imageAndText.tsx
+++ b/scripts/src/ui/page/imageAndText.tsx
@@ -1,18 +1,23 @@
 import * as React from "react";
 import BasePage from "./base";
+import { CommonProps } from "../../app";
 
 import "../../../../styles/src/page/imageAndText.styl";
 
-export interface ImageAndTextProps {
+export interface ImageAndTextProps extends CommonProps {
 	image: string;
-	title: string;
-	onBtnClick?: () => void;
-	btnText: string;
+	onBtnClick: (answerData: any) => void;
 	footerHtml: string;
+	bodyHtml: string;
+	buttonText: string;
 }
 
-class ImageAndText extends React.Component<any, ImageAndTextProps> {
+class ImageAndText extends React.Component<ImageAndTextProps> {
 	public render() {
+		const currentPage = this.props.pageIndex + 1;
+		/* the list is 0 based */
+		const totalQuestionPages = this.props.totalPagesCount - 1;
+		/* the list contains a Thank you page --- a better solution is better */
 		return (<BasePage className="imageAndText">
 			<div className="header">
 				<img src={this.props.image}/>

From 7002e92dc5bd67d0345cb45b0d0ad508156f8709 Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Wed, 8 May 2019 17:33:27 +0300
Subject: [PATCH 19/30] navigation

---
 scripts/src/ui/page/imageAndText.tsx |  7 +++++++
 styles/src/page/imageAndText.styl    | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/scripts/src/ui/page/imageAndText.tsx b/scripts/src/ui/page/imageAndText.tsx
index ae4a9db..a595435 100644
--- a/scripts/src/ui/page/imageAndText.tsx
+++ b/scripts/src/ui/page/imageAndText.tsx
@@ -12,6 +12,8 @@ export interface ImageAndTextProps extends CommonProps {
 	buttonText: string;
 }
 
+const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
+
 class ImageAndText extends React.Component<ImageAndTextProps> {
 	public render() {
 		const currentPage = this.props.pageIndex + 1;
@@ -19,6 +21,11 @@ class ImageAndText extends React.Component<ImageAndTextProps> {
 		const totalQuestionPages = this.props.totalPagesCount - 1;
 		/* the list contains a Thank you page --- a better solution is better */
 		return (<BasePage className="imageAndText">
+			<div className="header-controls">
+				<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl('ic-back') } /></button>
+				<span></span>
+				<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
+			</div>
 			<div className="header">
 				<img src={this.props.image}/>
 				<div className="title">{this.props.title}</div>
diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index dd73584..36a29f8 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -9,6 +9,24 @@ $text-font-size()
 	height: 100%
 	font-roboto()
 
+	.header-controls
+		flex-box()
+		justify-content: space-between
+		align-items: center
+		font-size: 6.2vw
+	.title
+		display: inline-block
+		width: 72vw
+		margin: 0.1rem auto 8%
+		font-weight: 500
+	button.back-nav
+		-webkit-appearance: none
+		border: none
+		background: none
+		padding: 0
+		img
+			width: 2rem
+
 	.header
 		padding 5vh 0 3vh
 		flex-box(column)

From b870054a8d8ca193ade2771bc785543177ea49f2 Mon Sep 17 00:00:00 2001
From: Victor Sulema <victorsulema@Victors-MacBook-Pro.local>
Date: Sun, 12 May 2019 10:49:54 +0300
Subject: [PATCH 20/30] styles fixes

---
 html/index.html                           |  9 ++++++---
 scripts/src/ui/page/imageAndText.tsx      |  4 +++-
 styles/src/page/imageAndText.styl         | 22 ++++++++++++++++++++++
 styles/src/page/multichoice.question.styl |  2 +-
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/html/index.html b/html/index.html
index c4876d9..ca3fe41 100644
--- a/html/index.html
+++ b/html/index.html
@@ -37,7 +37,8 @@
 								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinlogoTut%403x.png",
 								title: "What is Kin?",
 								bodyHtml: "Kin is a new currency for use in everyday digital services. In our Marketplace you\’ll be able to earn Kin by completing tasks and spend Kin on top brands",
-								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								rewardText: "Finish the tutorial and earn",
+								rewardValue: 6000,
 								buttonText: "Next",
 							},
 							{
@@ -46,7 +47,8 @@
 								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinMarketplaceIcon%403x.png",
 								title: "Kin Marketplace",
 								bodyHtml: "The Kin Marketplace experience provides you with a core wallet functionally which includes a place to view your balance as well as incoming/outgoing payments. The Marketplace is a home base where you can engage in the earn/spend opportunities.",
-								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								rewardText: "Finish the tutorial and earn",
+								rewardValue: 6000,
 								buttonText: "Next",
 							},
 							{
@@ -55,7 +57,8 @@
 								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/walletsIcon%403x.png",
 								title: "How to earn/spend Kin?",
 								bodyHtml: "You can earn Kin by investing a little time to complete tasks such as answering short surveys, watching a video or reading a tutorial just like this one.",
-								footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
+								rewardText: "Finish the tutorial and earn",
+								rewardValue: 6000,
 								buttonText: "Got It",
 							},
 							{
diff --git a/scripts/src/ui/page/imageAndText.tsx b/scripts/src/ui/page/imageAndText.tsx
index a595435..1d1653d 100644
--- a/scripts/src/ui/page/imageAndText.tsx
+++ b/scripts/src/ui/page/imageAndText.tsx
@@ -31,7 +31,9 @@ class ImageAndText extends React.Component<ImageAndTextProps> {
 				<div className="title">{this.props.title}</div>
 			</div>
 			<div className="body" dangerouslySetInnerHTML={{ __html: this.props.bodyHtml }}></div>
-			<div className="footer" dangerouslySetInnerHTML={{ __html: this.props.footerHtml }}></div>
+			<div className="footer">
+				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin') } />{ Number(this.props.rewardValue) }</span> </div>
+			</div>
 			<button className={"btn " + (!this.props.onBtnClick ? "hidden" : "")}
 					onClick={this.props.onBtnClick.bind(this.props, { })}>{this.props.buttonText}</button>
 		</BasePage>);
diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index 36a29f8..8ec3958 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -10,6 +10,8 @@ $text-font-size()
 	font-roboto()
 
 	.header-controls
+		width: 86%
+		margin: 7% auto 0
 		flex-box()
 		justify-content: space-between
 		align-items: center
@@ -58,6 +60,26 @@ $text-font-size()
 		text-align: center
 		$text-font-size()
 		color #f9f9f9
+
+		.description
+			margin: 3vh auto
+			font-size: .9rem
+			.description-price
+				display: -webkit-inline-flex
+				display: -moz-inline-flex
+				display: -ms-inline-flex
+				display: -o-inline-flex
+				display: inline-flex
+				align-items: center
+				vertical-align: middle
+				color: $kin-purple
+				line-height: 90%
+				img
+					width: 7px
+					margin-right: 3px
+				.full-width-plus
+					font-size: .8rem
+					font-weight bold
 	.btn
 		btn()
 		border-width 0
diff --git a/styles/src/page/multichoice.question.styl b/styles/src/page/multichoice.question.styl
index 44700d6..7262d27 100644
--- a/styles/src/page/multichoice.question.styl
+++ b/styles/src/page/multichoice.question.styl
@@ -5,7 +5,7 @@
 	font-roboto()
 	.header
 		width: 86%
-		margin: 10% auto 0
+		margin: 7% auto 0
 		.header-controls
 			flex-box()
 			justify-content: space-between

From 3f3d45a4793b11bf08ed446ce6515df8ba260a98 Mon Sep 17 00:00:00 2001
From: Victor <doc999tor@gmail.com>
Date: Tue, 28 May 2019 18:13:17 +0300
Subject: [PATCH 21/30] tutorial new ui + new images; cancelled navigation back
 and hideTopBar functionality

---
 html/index.html                               |  6 ++--
 scripts/src/app.tsx                           | 30 +++++++------------
 scripts/src/ui/page/earnThankYou.tsx          |  4 +--
 scripts/src/ui/page/imageAndText.tsx          | 19 ++++++++++--
 scripts/src/ui/page/multichoice.question.tsx  |  2 +-
 scripts/src/ui/page/successBasedThankYou.tsx  |  4 +--
 .../ui/page/timed.multichoice.question.tsx    |  2 +-
 styles/src/page/imageAndText.styl             | 10 +++----
 styles/src/page/multichoice.question.styl     |  4 +--
 9 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/html/index.html b/html/index.html
index ca3fe41..d5eb500 100644
--- a/html/index.html
+++ b/html/index.html
@@ -34,7 +34,7 @@
 							{
 								id: "ASsdgASD#$5F",
 								type: PageType.ImageAndText,
-								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinlogoTut%403x.png",
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kin-logo.svg",
 								title: "What is Kin?",
 								bodyHtml: "Kin is a new currency for use in everyday digital services. In our Marketplace you\’ll be able to earn Kin by completing tasks and spend Kin on top brands",
 								rewardText: "Finish the tutorial and earn",
@@ -44,7 +44,7 @@
 							{
 								id: "3e#$5F",
 								type: PageType.ImageAndText,
-								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinMarketplaceIcon%403x.png",
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/globehands.svg",
 								title: "Kin Marketplace",
 								bodyHtml: "The Kin Marketplace experience provides you with a core wallet functionally which includes a place to view your balance as well as incoming/outgoing payments. The Marketplace is a home base where you can engage in the earn/spend opportunities.",
 								rewardText: "Finish the tutorial and earn",
@@ -54,7 +54,7 @@
 							{
 								id: "ASDFASD#$5F",
 								type: PageType.ImageAndText,
-								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/walletsIcon%403x.png",
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kin-club.svg",
 								title: "How to earn/spend Kin?",
 								bodyHtml: "You can earn Kin by investing a little time to complete tasks such as answering short surveys, watching a video or reading a tutorial just like this one.",
 								rewardText: "Finish the tutorial and earn",
diff --git a/scripts/src/app.tsx b/scripts/src/app.tsx
index 174999f..68c4b9e 100644
--- a/scripts/src/app.tsx
+++ b/scripts/src/app.tsx
@@ -50,7 +50,7 @@ export interface CommonProps {
 	rewardText?: string;
 	rewardValue?: number;
 	updateSharedDate(data: any): void;
-	navigateBack(): void;
+	close(): void;
 }
 
 const sharedPageData = {};
@@ -87,7 +87,7 @@ class App extends React.Component {
 			data: {},
 		};
 		this.onPageCompleteHandler = this.onPageCompleteHandler.bind(this);
-		this.navigateBack = this.navigateBack.bind(this);
+		this.close = this.close.bind(this);
 	}
 
 	public render() {
@@ -113,7 +113,7 @@ class App extends React.Component {
 			if (Object.keys(allData)) {
 				console.log("submit " + JSON.stringify(this.state.data));
 				bridge.submitResult(this.state.data);
-				bridge.close();
+				this.close();
 			}
 			return;
 		}
@@ -124,20 +124,10 @@ class App extends React.Component {
 		});
 	}
 
-	private navigateBack() {
-		const navigationStep = -1;
-		const newPageIndex = this.navigate(navigationStep);
-
-		const shouldExit = newPageIndex < 0;
-		if (shouldExit) {
-			console.log("exit " + JSON.stringify(this.state.data));
-			bridge.close();
-			return;
-		}
-
-		this.setState(Object.assign({}, this.state, {
-			currentPage: newPageIndex,
-		}));
+	private close() {
+		console.log("exit " + JSON.stringify(this.state.data));
+		bridge.close();
+		return;
 	}
 
 	private navigate(pageStep: number): number {
@@ -166,7 +156,7 @@ class App extends React.Component {
 				currentPage: this.state.currentPage,
 				sharedData: sharedPageData,
 				updateSharedDate: this.updateSharedData,
-				navigateBack: this.navigateBack,
+				close: this.close,
 			};
 
 			switch (page.type) {
@@ -181,7 +171,7 @@ class App extends React.Component {
 				case PageType.ImageAndText:
 					return <ImageAndTextPage {...commonProps} image={page.image} footerHtml={page.footerHtml} bodyHtml={page.bodyHtml} buttonText={page.buttonText} onBtnClick={this.onPageCompleteHandler}/>;
 				case PageType.EarnThankYou:
-					return <EarnThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} hideTopBarHandler={bridge.hideTopBar} amount={page.description}/>;
+					return <EarnThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} amount={page.description}/>;
 				case PageType.TimedFullPageMultiChoice:
 					return <TimedMultichoiceQuestion
 						{...commonProps}
@@ -193,7 +183,7 @@ class App extends React.Component {
 						amount={page.amount}
 						rightAnswer={page.rightAnswer}/>;
 				case PageType.SuccessBasedThankYou:
-					return <SuccessBasedThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} hideTopBarHandler={bridge.hideTopBar}/>;
+					return <SuccessBasedThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} />;
 			}
 		});
 	}
diff --git a/scripts/src/ui/page/earnThankYou.tsx b/scripts/src/ui/page/earnThankYou.tsx
index a3f086b..8fb85c7 100644
--- a/scripts/src/ui/page/earnThankYou.tsx
+++ b/scripts/src/ui/page/earnThankYou.tsx
@@ -8,7 +8,7 @@ export interface EarnThankYouProps extends CommonProps {
 	amount: number;
 	isDisplayed: boolean;  // is this the currently displayed page
 	closeHandler(answerData: any): void;
-	hideTopBarHandler(): void;
+	// hideTopBarHandler(): void;
 }
 
 const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
@@ -16,7 +16,7 @@ const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.ki
 export class EarnThankYou extends React.Component<EarnThankYouProps> {
 	public componentDidUpdate() {
 		if (this.props.isDisplayed) {
-			this.props.hideTopBarHandler();
+			// this.props.hideTopBarHandler();
 			setTimeout(this.props.closeHandler, 3000);
 		}
 	}
diff --git a/scripts/src/ui/page/imageAndText.tsx b/scripts/src/ui/page/imageAndText.tsx
index 1d1653d..af7d33c 100644
--- a/scripts/src/ui/page/imageAndText.tsx
+++ b/scripts/src/ui/page/imageAndText.tsx
@@ -20,19 +20,21 @@ class ImageAndText extends React.Component<ImageAndTextProps> {
 		/* the list is 0 based */
 		const totalQuestionPages = this.props.totalPagesCount - 1;
 		/* the list contains a Thank you page --- a better solution is better */
+
+		let imgSpecialClass = setSpecialClassForHeroImage(currentPage);
 		return (<BasePage className="imageAndText">
 			<div className="header-controls">
-				<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl('ic-back') } /></button>
+				<button className="close-btn" onClick={this.props.close}><img src={ getImageUrl("close-btn") } /></button>
 				<span></span>
 				<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
 			</div>
 			<div className="header">
-				<img src={this.props.image}/>
+				<img src={this.props.image} className={imgSpecialClass} />
 				<div className="title">{this.props.title}</div>
 			</div>
 			<div className="body" dangerouslySetInnerHTML={{ __html: this.props.bodyHtml }}></div>
 			<div className="footer">
-				<div className="description">{ this.props.rewardText } <span className='description-price'><span className="full-width-plus">＋</span><img src={ getImageUrl('kin-coin') } />{ Number(this.props.rewardValue) }</span> </div>
+				<div className="description">{ this.props.rewardText } <span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span> </div>
 			</div>
 			<button className={"btn " + (!this.props.onBtnClick ? "hidden" : "")}
 					onClick={this.props.onBtnClick.bind(this.props, { })}>{this.props.buttonText}</button>
@@ -40,4 +42,15 @@ class ImageAndText extends React.Component<ImageAndTextProps> {
 	}
 }
 
+function setSpecialClassForHeroImage(page: number) {
+	switch (page) {
+		case 1: return "";
+		case 2: return "full-width";
+		case 3: return "right-aligned";
+
+		default:
+			return "";
+	}
+}
+
 export default ImageAndText;
diff --git a/scripts/src/ui/page/multichoice.question.tsx b/scripts/src/ui/page/multichoice.question.tsx
index 3c671ae..452c44e 100644
--- a/scripts/src/ui/page/multichoice.question.tsx
+++ b/scripts/src/ui/page/multichoice.question.tsx
@@ -61,7 +61,7 @@ export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMu
 		return (
 			<React.Fragment>
 				<div className="header-controls">
-					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl("ic-back") } /></button>
+					<button className="close-btn" onClick={this.props.close}><img src={ getImageUrl("close-btn") } /></button>
 					<span></span>
 					<div className="pageProgress">{currentPage}/{totalQuestionPages}</div>
 				</div>
diff --git a/scripts/src/ui/page/successBasedThankYou.tsx b/scripts/src/ui/page/successBasedThankYou.tsx
index 97ee351..6352a52 100644
--- a/scripts/src/ui/page/successBasedThankYou.tsx
+++ b/scripts/src/ui/page/successBasedThankYou.tsx
@@ -8,7 +8,7 @@ export interface EarnThankYouProps extends CommonProps {
 	isDisplayed: boolean;  // is this the currently displayed page
 	closeHandler(answerData: any): void;
 
-	hideTopBarHandler(): void;
+	// hideTopBarHandler(): void;
 }
 
 const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
@@ -19,7 +19,7 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 
 	public componentDidUpdate() {
 		if (this.props.isDisplayed) {
-			this.props.hideTopBarHandler();
+			// this.props.hideTopBarHandler();
 			setTimeout(this.props.closeHandler, 3000);
 		}
 	}
diff --git a/scripts/src/ui/page/timed.multichoice.question.tsx b/scripts/src/ui/page/timed.multichoice.question.tsx
index 5128515..33cfc8a 100644
--- a/scripts/src/ui/page/timed.multichoice.question.tsx
+++ b/scripts/src/ui/page/timed.multichoice.question.tsx
@@ -70,7 +70,7 @@ class TimedMultichoiceQuestion extends MultichoiceQuestion {
 		return (
 			<React.Fragment>
 				<div className="header-controls">
-					<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl("ic-back") } /></button>
+					<button className="close-btn" onClick={this.props.close}><img src={ getImageUrl("close-btn") } /></button>
 					<Timer parent={this.props.pageIndex} pause={!this.props.isDisplayed} time={quizTimerTime} callback={this.onSelect.bind(this, null, -1)}/>
 					<div className="pageProgress">{currentPage}/{totalQuestionPages}</div>
 				</div>
diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index 8ec3958..2acf969 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -21,22 +21,22 @@ $text-font-size()
 		width: 72vw
 		margin: 0.1rem auto 8%
 		font-weight: 500
-	button.back-nav
+	button.close-btn
 		-webkit-appearance: none
 		border: none
 		background: none
 		padding: 0
-		img
-			width: 2rem
 
 	.header
 		padding 5vh 0 3vh
 		flex-box(column)
-		min-height 22vh
 		border none
 		img
-			height: 31.7vw
 			margin: 0 auto 0
+			&.full-width
+				width 100%
+			&.right-aligned
+				margin-right 0
 		.title
 			font-roboto()
 			color: #f9f9f9
diff --git a/styles/src/page/multichoice.question.styl b/styles/src/page/multichoice.question.styl
index 7262d27..032c2be 100644
--- a/styles/src/page/multichoice.question.styl
+++ b/styles/src/page/multichoice.question.styl
@@ -16,13 +16,11 @@
 			width: 72vw
 			margin: 0.1rem auto 8%
 			font-weight: 500
-		button.back-nav
+		button.close-btn
 			-webkit-appearance: none
 			border: none
 			background: none
 			padding: 0
-			img
-				width: 2rem
 
 		.description
 			margin: 3vh auto

From 1b05af3a479326671536d844e1e2b2dcc685415b Mon Sep 17 00:00:00 2001
From: Victor <doc999tor@gmail.com>
Date: Tue, 28 May 2019 19:12:05 +0300
Subject: [PATCH 22/30] EarnThankYou price fix

---
 html/index.html     | 8 ++++----
 scripts/src/app.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/html/index.html b/html/index.html
index d5eb500..51a1b9d 100644
--- a/html/index.html
+++ b/html/index.html
@@ -34,7 +34,7 @@
 							{
 								id: "ASsdgASD#$5F",
 								type: PageType.ImageAndText,
-								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kin-logo.svg",
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/kin-logo.svg",
 								title: "What is Kin?",
 								bodyHtml: "Kin is a new currency for use in everyday digital services. In our Marketplace you\’ll be able to earn Kin by completing tasks and spend Kin on top brands",
 								rewardText: "Finish the tutorial and earn",
@@ -44,7 +44,7 @@
 							{
 								id: "3e#$5F",
 								type: PageType.ImageAndText,
-								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/globehands.svg",
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/globehands.svg",
 								title: "Kin Marketplace",
 								bodyHtml: "The Kin Marketplace experience provides you with a core wallet functionally which includes a place to view your balance as well as incoming/outgoing payments. The Marketplace is a home base where you can engage in the earn/spend opportunities.",
 								rewardText: "Finish the tutorial and earn",
@@ -54,7 +54,7 @@
 							{
 								id: "ASDFASD#$5F",
 								type: PageType.ImageAndText,
-								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kin-club.svg",
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/kin-club.svg",
 								title: "How to earn/spend Kin?",
 								bodyHtml: "You can earn Kin by investing a little time to complete tasks such as answering short surveys, watching a video or reading a tutorial just like this one.",
 								rewardText: "Finish the tutorial and earn",
@@ -63,7 +63,7 @@
 							},
 							{
 								type: PageType.EarnThankYou,
-							   description: "4,500"
+								rewardValue: "4,500"
 							},
 							//
 							//*** Poll ***//
diff --git a/scripts/src/app.tsx b/scripts/src/app.tsx
index 68c4b9e..335c77a 100644
--- a/scripts/src/app.tsx
+++ b/scripts/src/app.tsx
@@ -171,7 +171,7 @@ class App extends React.Component {
 				case PageType.ImageAndText:
 					return <ImageAndTextPage {...commonProps} image={page.image} footerHtml={page.footerHtml} bodyHtml={page.bodyHtml} buttonText={page.buttonText} onBtnClick={this.onPageCompleteHandler}/>;
 				case PageType.EarnThankYou:
-					return <EarnThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} amount={page.description}/>;
+					return <EarnThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} amount={page.rewardValue}/>;
 				case PageType.TimedFullPageMultiChoice:
 					return <TimedMultichoiceQuestion
 						{...commonProps}

From 46afcabedcd0b26abc623bda35ca76937b6e5733 Mon Sep 17 00:00:00 2001
From: Victor <doc999tor@gmail.com>
Date: Wed, 29 May 2019 17:31:27 +0300
Subject: [PATCH 23/30] updated poll structure for faucet support

---
 scripts/src/ui/page/imageAndText.tsx               | 8 ++++++--
 scripts/src/ui/page/multichoice.question.tsx       | 6 +++++-
 scripts/src/ui/page/timed.multichoice.question.tsx | 6 +++++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/scripts/src/ui/page/imageAndText.tsx b/scripts/src/ui/page/imageAndText.tsx
index af7d33c..a87039d 100644
--- a/scripts/src/ui/page/imageAndText.tsx
+++ b/scripts/src/ui/page/imageAndText.tsx
@@ -21,7 +21,7 @@ class ImageAndText extends React.Component<ImageAndTextProps> {
 		const totalQuestionPages = this.props.totalPagesCount - 1;
 		/* the list contains a Thank you page --- a better solution is better */
 
-		let imgSpecialClass = setSpecialClassForHeroImage(currentPage);
+		const imgSpecialClass = setSpecialClassForHeroImage(currentPage);
 		return (<BasePage className="imageAndText">
 			<div className="header-controls">
 				<button className="close-btn" onClick={this.props.close}><img src={ getImageUrl("close-btn") } /></button>
@@ -34,7 +34,11 @@ class ImageAndText extends React.Component<ImageAndTextProps> {
 			</div>
 			<div className="body" dangerouslySetInnerHTML={{ __html: this.props.bodyHtml }}></div>
 			<div className="footer">
-				<div className="description">{ this.props.rewardText } <span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span> </div>
+				<div className="description">{ this.props.rewardText }
+				{ this.props.rewardValue &&
+					<span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span>
+				}
+				</div>
 			</div>
 			<button className={"btn " + (!this.props.onBtnClick ? "hidden" : "")}
 					onClick={this.props.onBtnClick.bind(this.props, { })}>{this.props.buttonText}</button>
diff --git a/scripts/src/ui/page/multichoice.question.tsx b/scripts/src/ui/page/multichoice.question.tsx
index 452c44e..ef3b155 100644
--- a/scripts/src/ui/page/multichoice.question.tsx
+++ b/scripts/src/ui/page/multichoice.question.tsx
@@ -66,7 +66,11 @@ export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMu
 					<div className="pageProgress">{currentPage}/{totalQuestionPages}</div>
 				</div>
 				<span className="title">{this.props.title}</span>
-				<div className="description">{ this.props.rewardText } <span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span> </div>
+				<div className="description">{ this.props.rewardText }
+				{ this.props.rewardValue &&
+					<span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span>
+				}
+				</div>
 			</React.Fragment>
 		);
 	}
diff --git a/scripts/src/ui/page/timed.multichoice.question.tsx b/scripts/src/ui/page/timed.multichoice.question.tsx
index 33cfc8a..90f44ee 100644
--- a/scripts/src/ui/page/timed.multichoice.question.tsx
+++ b/scripts/src/ui/page/timed.multichoice.question.tsx
@@ -75,7 +75,11 @@ class TimedMultichoiceQuestion extends MultichoiceQuestion {
 					<div className="pageProgress">{currentPage}/{totalQuestionPages}</div>
 				</div>
 				<p className="title">{this.props.title}</p>
-				<div className="description">{ this.props.rewardText } <span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span> </div>
+				<div className="description">{ this.props.rewardText }
+				{ this.props.rewardValue &&
+				 <span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span>
+				}
+				</div>
 			</React.Fragment>
 		);
 	}

From a136024959f5ceddefc8f092a58a9471a1e4622f Mon Sep 17 00:00:00 2001
From: Victor <doc999tor@gmail.com>
Date: Wed, 29 May 2019 19:10:59 +0300
Subject: [PATCH 24/30] added white theme

---
 styles/src/app.styl               | 4 ++--
 styles/src/page/earnThankYou.styl | 2 +-
 styles/src/page/imageAndText.styl | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/styles/src/app.styl b/styles/src/app.styl
index 35f3784..db2711a 100644
--- a/styles/src/app.styl
+++ b/styles/src/app.styl
@@ -6,8 +6,8 @@ html, body, #root, .app,  .slider-wrapper, .slider-wrapper .slider.animated
 	text-align: center
 
 .app
-	background-color #1f1f1f
-	color: #fff
+	background-color #fff
+	color #1f1f1f
 
 .carouselWrapper, .react-swipeable-view-container
 	width: 100%
diff --git a/styles/src/page/earnThankYou.styl b/styles/src/page/earnThankYou.styl
index 67c0855..d224124 100644
--- a/styles/src/page/earnThankYou.styl
+++ b/styles/src/page/earnThankYou.styl
@@ -10,7 +10,7 @@
 	background-image: #1f1f1f
 	.text
 		font-roboto()
-		color: white
+		// color: white
 		width: 100%
 		text-align: center
 		font-size: 8vw
diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index 2acf969..7599b0c 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -39,7 +39,7 @@ $text-font-size()
 				margin-right 0
 		.title
 			font-roboto()
-			color: #f9f9f9
+			// color: #f9f9f9
 			margin: 3vh auto 0
 			letter-spacing: -0.5px
 			font-size 1.25rem
@@ -52,18 +52,18 @@ $text-font-size()
 		font-weight 300
 		line-height: 1.7
 		$text-font-size()
-		color #f9f9f9
+		// color #f9f9f9
 		width 70vw
 		text-align center
 	.footer
 		margin: auto auto 3vh
 		text-align: center
 		$text-font-size()
-		color #f9f9f9
+		// color #f9f9f9
 
 		.description
 			margin: 3vh auto
-			font-size: .9rem
+			font-size: .8rem
 			.description-price
 				display: -webkit-inline-flex
 				display: -moz-inline-flex

From bef9986ce359317f02670b24aaa11bfae4544843 Mon Sep 17 00:00:00 2001
From: Victor <doc999tor@gmail.com>
Date: Thu, 30 May 2019 14:33:32 +0300
Subject: [PATCH 25/30] fixes

---
 html/index.html                                    | 5 +++--
 scripts/src/ui/page/earnThankYou.tsx               | 2 +-
 scripts/src/ui/page/imageAndText.tsx               | 2 +-
 scripts/src/ui/page/multichoice.question.tsx       | 2 +-
 scripts/src/ui/page/successBasedThankYou.tsx       | 6 +++---
 scripts/src/ui/page/timed.multichoice.question.tsx | 2 +-
 styles/src/common.styl                             | 3 ++-
 styles/src/page/earnThankYou.styl                  | 6 +++---
 styles/src/page/imageAndText.styl                  | 5 ++---
 styles/src/page/multichoice.question.styl          | 5 ++---
 10 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/html/index.html b/html/index.html
index 51a1b9d..891abe0 100644
--- a/html/index.html
+++ b/html/index.html
@@ -65,7 +65,7 @@
 								type: PageType.EarnThankYou,
 								rewardValue: "4,500"
 							},
-							//
+
 							//*** Poll ***//
 							// {
 							// 	type: PageType.FullPageMultiChoice,
@@ -101,7 +101,8 @@
 							// },
 							// {
 							// 	type: PageType.EarnThankYou,
-							// 	description: "4,500"
+							// 	description: "4,500",
+							// 	rewardValue: "4,500",
 							// },
 
 							//*** Quiz ***//
diff --git a/scripts/src/ui/page/earnThankYou.tsx b/scripts/src/ui/page/earnThankYou.tsx
index 8fb85c7..1d308b3 100644
--- a/scripts/src/ui/page/earnThankYou.tsx
+++ b/scripts/src/ui/page/earnThankYou.tsx
@@ -26,7 +26,7 @@ export class EarnThankYou extends React.Component<EarnThankYouProps> {
 			<BasePage className="earnThankYou">
 				<div className="text">
 					<div>Yay! You've earned</div>
-					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>{this.props.amount}</span></span>
+					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span className="amount-value" >{this.props.amount}</span></span>
 				</div>
 				<div className={"footer"}>
 					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
diff --git a/scripts/src/ui/page/imageAndText.tsx b/scripts/src/ui/page/imageAndText.tsx
index a87039d..d8d0a40 100644
--- a/scripts/src/ui/page/imageAndText.tsx
+++ b/scripts/src/ui/page/imageAndText.tsx
@@ -36,7 +36,7 @@ class ImageAndText extends React.Component<ImageAndTextProps> {
 			<div className="footer">
 				<div className="description">{ this.props.rewardText }
 				{ this.props.rewardValue &&
-					<span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span>
+					<span className="description-price"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } />{ this.props.rewardValue }</span>
 				}
 				</div>
 			</div>
diff --git a/scripts/src/ui/page/multichoice.question.tsx b/scripts/src/ui/page/multichoice.question.tsx
index ef3b155..07fc9d4 100644
--- a/scripts/src/ui/page/multichoice.question.tsx
+++ b/scripts/src/ui/page/multichoice.question.tsx
@@ -68,7 +68,7 @@ export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMu
 				<span className="title">{this.props.title}</span>
 				<div className="description">{ this.props.rewardText }
 				{ this.props.rewardValue &&
-					<span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span>
+					<span className="description-price"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } />{ this.props.rewardValue }</span>
 				}
 				</div>
 			</React.Fragment>
diff --git a/scripts/src/ui/page/successBasedThankYou.tsx b/scripts/src/ui/page/successBasedThankYou.tsx
index 6352a52..b41921a 100644
--- a/scripts/src/ui/page/successBasedThankYou.tsx
+++ b/scripts/src/ui/page/successBasedThankYou.tsx
@@ -48,7 +48,7 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 				<div className="text">
 					<h1>Better luck next time!</h1>
 					<h2>you've earned:</h2>
-					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>1</span></span>
+					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span>1</span></span>
 				</div>
 				<div className="footer">
 					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
@@ -63,7 +63,7 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 				<div className="text">
 					<h1>Well Done!</h1>
 					<h2>Yay! You've earned:</h2>
-					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>{ this.props.sharedData.earnedAmount }</span></span>
+					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span className="amount">{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
 				<div className="footer">
 					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
@@ -78,7 +78,7 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 				<div className="text">
 					<h1>High five!</h1>
 					<h2>Yay! You've earned:</h2>
-					<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>{ this.props.sharedData.earnedAmount }</span></span>
+					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span className="amount">{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
 				<div className="footer">
 					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
diff --git a/scripts/src/ui/page/timed.multichoice.question.tsx b/scripts/src/ui/page/timed.multichoice.question.tsx
index 90f44ee..715910a 100644
--- a/scripts/src/ui/page/timed.multichoice.question.tsx
+++ b/scripts/src/ui/page/timed.multichoice.question.tsx
@@ -77,7 +77,7 @@ class TimedMultichoiceQuestion extends MultichoiceQuestion {
 				<p className="title">{this.props.title}</p>
 				<div className="description">{ this.props.rewardText }
 				{ this.props.rewardValue &&
-				 <span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span>
+				 <span className="description-price"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } />{ this.props.rewardValue }</span>
 				}
 				</div>
 			</React.Fragment>
diff --git a/styles/src/common.styl b/styles/src/common.styl
index 1210834..daf6658 100644
--- a/styles/src/common.styl
+++ b/styles/src/common.styl
@@ -31,7 +31,8 @@ font-roboto()
 btn()
 	border-radius: 5px
 	width: 86vw
-	height: 15vw
+	height: 50px
+	padding 0
 	font-size: 4.2vw
 	border: solid 1px #3d3d3d
 	outline none
diff --git a/styles/src/page/earnThankYou.styl b/styles/src/page/earnThankYou.styl
index d224124..bfccbd4 100644
--- a/styles/src/page/earnThankYou.styl
+++ b/styles/src/page/earnThankYou.styl
@@ -31,13 +31,13 @@
 			font-weight: 500
 			font-size: 12vw
 			color: $kin-purple
-			> *
+			& > *
 				vertical-align: middle
-			.full-width-plus
-				font-size: 7vw
 			img
 				width: 1.3rem
 				margin-right: .4rem
+			.amount-value
+				line-height 1
 	.footer
 		img
 			position: absolute
diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index 7599b0c..5549350 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -71,15 +71,14 @@ $text-font-size()
 				display: -o-inline-flex
 				display: inline-flex
 				align-items: center
+				margin-left .3rem
 				vertical-align: middle
 				color: $kin-purple
 				line-height: 90%
 				img
 					width: 7px
 					margin-right: 3px
-				.full-width-plus
-					font-size: .8rem
-					font-weight bold
+
 	.btn
 		btn()
 		border-width 0
diff --git a/styles/src/page/multichoice.question.styl b/styles/src/page/multichoice.question.styl
index 032c2be..9caa0d6 100644
--- a/styles/src/page/multichoice.question.styl
+++ b/styles/src/page/multichoice.question.styl
@@ -32,6 +32,7 @@
 				display: -o-inline-flex
 				display: inline-flex
 				align-items: center
+				margin-left .3rem
 				vertical-align: middle
 				color: $kin-purple
 				line-height: 90%
@@ -39,9 +40,7 @@
 				img
 					width: 7px
 					margin-right: 3px
-				.full-width-plus
-					font-size: .8rem
-					font-weight bold
+
 	.choices
 		margin: 6% auto 0
 		flex-box(column)

From 7f65e19aa41b20d6b09fca00fc5da9579510abc7 Mon Sep 17 00:00:00 2001
From: Victor <doc999tor@gmail.com>
Date: Thu, 30 May 2019 15:21:54 +0300
Subject: [PATCH 26/30] fixes

---
 styles/src/page/imageAndText.styl | 1 -
 1 file changed, 1 deletion(-)

diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index 5549350..50c4f96 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -46,7 +46,6 @@ $text-font-size()
 			text-align center
 	.body
 		flex-box(column)
-		height: 36vh
 		margin 0 auto 0
 		font-roboto()
 		font-weight 300

From bdaf4b6a602ebaf372a6ed2a1bbe1851131e3606 Mon Sep 17 00:00:00 2001
From: vanessatkach <vdrory@gmail.com>
Date: Mon, 3 Jun 2019 15:40:36 +0300
Subject: [PATCH 27/30] Fix ECO-1469: Border for wrong answer

---
 styles/src/page/multichoice.question.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/src/page/multichoice.question.styl b/styles/src/page/multichoice.question.styl
index 9caa0d6..5aec070 100644
--- a/styles/src/page/multichoice.question.styl
+++ b/styles/src/page/multichoice.question.styl
@@ -55,7 +55,7 @@
 		&.rightAnswer
 			btn-active()
 		&.wrongAnswer
-			border solid 3px $watermelon
+			border solid 1px $watermelon
 	&:not(.highlightRightWrong)
 		.choices
 			.choice

From 7c47a1da85ad33fbb5b956840f35c89959f524b5 Mon Sep 17 00:00:00 2001
From: Victor <doc999tor@gmail.com>
Date: Tue, 4 Jun 2019 06:13:51 +0300
Subject: [PATCH 28/30] border decreased to 1px width

---
 styles/src/page/earnThankYou.styl         | 6 ++++--
 styles/src/page/imageAndText.styl         | 6 +++---
 styles/src/page/multichoice.question.styl | 3 +--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/styles/src/page/earnThankYou.styl b/styles/src/page/earnThankYou.styl
index bfccbd4..aa3213c 100644
--- a/styles/src/page/earnThankYou.styl
+++ b/styles/src/page/earnThankYou.styl
@@ -34,8 +34,10 @@
 			& > *
 				vertical-align: middle
 			img
-				width: 1.3rem
-				margin-right: .4rem
+				width 1.3rem
+				margin-right .2rem
+				&.plus-sign
+					margin-right .3rem
 			.amount-value
 				line-height 1
 	.footer
diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index 50c4f96..e340943 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -40,7 +40,7 @@ $text-font-size()
 		.title
 			font-roboto()
 			// color: #f9f9f9
-			margin: 3vh auto 0
+			margin: 8vh auto 0
 			letter-spacing: -0.5px
 			font-size 1.25rem
 			text-align center
@@ -61,7 +61,7 @@ $text-font-size()
 		// color #f9f9f9
 
 		.description
-			margin: 3vh auto
+			margin: 0 auto
 			font-size: .8rem
 			.description-price
 				display: -webkit-inline-flex
@@ -76,7 +76,7 @@ $text-font-size()
 				line-height: 90%
 				img
 					width: 7px
-					margin-right: 3px
+					margin-right: 1px
 
 	.btn
 		btn()
diff --git a/styles/src/page/multichoice.question.styl b/styles/src/page/multichoice.question.styl
index 5aec070..bd58b23 100644
--- a/styles/src/page/multichoice.question.styl
+++ b/styles/src/page/multichoice.question.styl
@@ -36,10 +36,9 @@
 				vertical-align: middle
 				color: $kin-purple
 				line-height: 90%
-
 				img
 					width: 7px
-					margin-right: 3px
+					margin-right: 1px
 
 	.choices
 		margin: 6% auto 0

From 5d84f38768ced6569e7de914fb630e5a26dde416 Mon Sep 17 00:00:00 2001
From: Shahar Solomianik <shaharsol@Shahars-MacBook-Pro.local>
Date: Mon, 29 Jul 2019 12:13:06 +0300
Subject: [PATCH 29/30] solves ECO-1545

---
 scripts/src/ui/container/carousel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/src/ui/container/carousel.tsx b/scripts/src/ui/container/carousel.tsx
index ffbe3c9..3f24a80 100644
--- a/scripts/src/ui/container/carousel.tsx
+++ b/scripts/src/ui/container/carousel.tsx
@@ -9,7 +9,7 @@ const carouselSettings: any = {
 class Carousel extends React.Component<any, {}> {
 	public render(): any {
 		return (
-			<SwipeableViews className={"carouselWrapper"} index={this.props.selectedItem} {...carouselSettings} >
+			<SwipeableViews className={"carouselWrapper"} slideStyle={{ height: "100%" }} index={this.props.selectedItem} {...carouselSettings} >
 				{this.props.children}
 			</SwipeableViews>
 		);

From 85821640ae9db7ff4e1c82a5b2856fc535551123 Mon Sep 17 00:00:00 2001
From: shaharsol <shahar@gnift.com>
Date: Mon, 29 Jul 2019 17:25:33 +0300
Subject: [PATCH 30/30] i18n ( ECO-1560 ) (#24)

* integrated react-i18next

* added accept-language

* removed i18next ref

* removed i18n

* removed i18n

* allow deving on ngrok

* language implementation

* removed all i18n refs
inserted own language refs

* refactor texts => dictionary

* removed unneccesary title

* integrated actual portuguese texts

* preps for PR

* encapsulated most of the logic in language.tsx, exportted a t function

* removed disableHostcheck: true

* refactor t => translate

* refactor language.tsx => language.ts and move it out of ui directory.

* refactor

* modify translate func to accept a key and return a translation rather then returning a language object

* accept-language added

* Language => LocalizedStrings

* minor language changes
---
 package-lock.json                            | 205 +++++++++++++++++--
 package.json                                 |   1 +
 scripts/src/app.tsx                          |   1 -
 scripts/src/language.ts                      |  47 +++++
 scripts/src/ui/page/earnThankYou.tsx         |   4 +-
 scripts/src/ui/page/successBasedThankYou.tsx |  14 +-
 6 files changed, 243 insertions(+), 29 deletions(-)
 create mode 100644 scripts/src/language.ts

diff --git a/package-lock.json b/package-lock.json
index d803476..486c5dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,30 @@
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
+		"@babel/runtime": {
+			"version": "7.5.5",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+			"integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+			"requires": {
+				"regenerator-runtime": "^0.13.2"
+			},
+			"dependencies": {
+				"regenerator-runtime": {
+					"version": "0.13.2",
+					"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+					"integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+				}
+			}
+		},
+		"@types/i18next-xhr-backend": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/@types/i18next-xhr-backend/-/i18next-xhr-backend-1.4.2.tgz",
+			"integrity": "sha512-uykS5BvdSoN+G7j7D19xzR12pEVkWmUrIEIxMsj2brVVzjc3gIthWCQKYqbe/b1q87SLbWb/ZHN9bR4qxi1H6A==",
+			"dev": true,
+			"requires": {
+				"i18next-xhr-backend": "*"
+			}
+		},
 		"@types/node": {
 			"version": "10.0.6",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-10.0.6.tgz",
@@ -224,6 +248,15 @@
 			"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
 			"dev": true
 		},
+		"accept-language": {
+			"version": "3.0.18",
+			"resolved": "https://registry.npmjs.org/accept-language/-/accept-language-3.0.18.tgz",
+			"integrity": "sha1-9QJfF79lpGaoRYOMz5jNuHfYM4Q=",
+			"requires": {
+				"bcp47": "^1.1.2",
+				"stable": "^0.1.6"
+			}
+		},
 		"accepts": {
 			"version": "1.3.5",
 			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -626,6 +659,11 @@
 			"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
 			"dev": true
 		},
+		"bcp47": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/bcp47/-/bcp47-1.1.2.tgz",
+			"integrity": "sha1-NUvjMH/9CEM6ePXh4glYRfifx/4="
+		},
 		"bcrypt-pbkdf": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
@@ -2743,7 +2781,8 @@
 				"ansi-regex": {
 					"version": "2.1.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"aproba": {
 					"version": "1.2.0",
@@ -2764,12 +2803,14 @@
 				"balanced-match": {
 					"version": "1.0.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"brace-expansion": {
 					"version": "1.1.11",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"balanced-match": "^1.0.0",
 						"concat-map": "0.0.1"
@@ -2784,17 +2825,20 @@
 				"code-point-at": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"concat-map": {
 					"version": "0.0.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"console-control-strings": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"core-util-is": {
 					"version": "1.0.2",
@@ -2911,7 +2955,8 @@
 				"inherits": {
 					"version": "2.0.3",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"ini": {
 					"version": "1.3.5",
@@ -2923,6 +2968,7 @@
 					"version": "1.0.0",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"number-is-nan": "^1.0.0"
 					}
@@ -2937,6 +2983,7 @@
 					"version": "3.0.4",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"brace-expansion": "^1.1.7"
 					}
@@ -2944,12 +2991,14 @@
 				"minimist": {
 					"version": "0.0.8",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"minipass": {
 					"version": "2.2.4",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"safe-buffer": "^5.1.1",
 						"yallist": "^3.0.0"
@@ -2968,6 +3017,7 @@
 					"version": "0.5.1",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"minimist": "0.0.8"
 					}
@@ -3048,7 +3098,8 @@
 				"number-is-nan": {
 					"version": "1.0.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"object-assign": {
 					"version": "4.1.1",
@@ -3060,6 +3111,7 @@
 					"version": "1.4.0",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"wrappy": "1"
 					}
@@ -3145,7 +3197,8 @@
 				"safe-buffer": {
 					"version": "5.1.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"safer-buffer": {
 					"version": "2.1.2",
@@ -3181,6 +3234,7 @@
 					"version": "1.0.2",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"code-point-at": "^1.0.0",
 						"is-fullwidth-code-point": "^1.0.0",
@@ -3200,6 +3254,7 @@
 					"version": "3.0.1",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"ansi-regex": "^2.0.0"
 					}
@@ -3243,12 +3298,14 @@
 				"wrappy": {
 					"version": "1.0.2",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"yallist": {
 					"version": "3.0.2",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				}
 			}
 		},
@@ -3576,6 +3633,14 @@
 				"uglify-js": "3.3.x"
 			}
 		},
+		"html-parse-stringify2": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
+			"integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
+			"requires": {
+				"void-elements": "^2.0.1"
+			}
+		},
 		"html-webpack-plugin": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@@ -3710,6 +3775,27 @@
 			"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
 			"dev": true
 		},
+		"i18next": {
+			"version": "17.0.6",
+			"resolved": "https://registry.npmjs.org/i18next/-/i18next-17.0.6.tgz",
+			"integrity": "sha512-bdNhzhcM6RG5m82RypVguCrAQNie/ycxW0Q5C6K9UDWD5hqApZfdJFbj4Ikz9jxIR+Ja1eg0yCQLhlCT+opwIg==",
+			"requires": {
+				"@babel/runtime": "^7.3.1"
+			}
+		},
+		"i18next-browser-languagedetector": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-3.0.1.tgz",
+			"integrity": "sha512-WFjPLNPWl62uu07AHY2g+KsC9qz0tyMq+OZEB/H7N58YKL/JLiCz9U709gaR20Mule/Ppn+uyfVx5REJJjn1HA=="
+		},
+		"i18next-xhr-backend": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/i18next-xhr-backend/-/i18next-xhr-backend-3.0.0.tgz",
+			"integrity": "sha512-Pi/X91Zk2nEqdEHTV+FG6VeMHRcMcPKRsYW/A0wlaCfKsoJc3TI7A75Tqse/d5LVGN2Ymzx0FT+R+gLag9Eb2g==",
+			"requires": {
+				"@babel/runtime": "^7.4.5"
+			}
+		},
 		"iconv-lite": {
 			"version": "0.4.23",
 			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
@@ -6221,25 +6307,69 @@
 			}
 		},
 		"react": {
-			"version": "16.3.2",
-			"resolved": "https://registry.npmjs.org/react/-/react-16.3.2.tgz",
-			"integrity": "sha512-o5GPdkhciQ3cEph6qgvYB7LTOHw/GB0qRI6ZFNugj49qJCFfgHwVNjZ5u+b7nif4vOeMIOuYj3CeYe2IBD74lg==",
+			"version": "16.8.6",
+			"resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
+			"integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
 			"requires": {
-				"fbjs": "^0.8.16",
 				"loose-envify": "^1.1.0",
 				"object-assign": "^4.1.1",
-				"prop-types": "^15.6.0"
+				"prop-types": "^15.6.2",
+				"scheduler": "^0.13.6"
+			},
+			"dependencies": {
+				"prop-types": {
+					"version": "15.7.2",
+					"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+					"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+					"requires": {
+						"loose-envify": "^1.4.0",
+						"object-assign": "^4.1.1",
+						"react-is": "^16.8.1"
+					},
+					"dependencies": {
+						"loose-envify": {
+							"version": "1.4.0",
+							"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+							"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+							"requires": {
+								"js-tokens": "^3.0.0 || ^4.0.0"
+							}
+						}
+					}
+				}
 			}
 		},
 		"react-dom": {
-			"version": "16.3.2",
-			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.2.tgz",
-			"integrity": "sha512-MMPko3zYncNrz/7gG17wJWUREZDvskZHXOwbttzl0F0L3wDmToyuETuo/r8Y5yvDejwYcRyWI1lvVBjLJWFwKA==",
+			"version": "16.8.6",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
+			"integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
 			"requires": {
-				"fbjs": "^0.8.16",
 				"loose-envify": "^1.1.0",
 				"object-assign": "^4.1.1",
-				"prop-types": "^15.6.0"
+				"prop-types": "^15.6.2",
+				"scheduler": "^0.13.6"
+			},
+			"dependencies": {
+				"prop-types": {
+					"version": "15.7.2",
+					"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+					"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+					"requires": {
+						"loose-envify": "^1.4.0",
+						"object-assign": "^4.1.1",
+						"react-is": "^16.8.1"
+					},
+					"dependencies": {
+						"loose-envify": {
+							"version": "1.4.0",
+							"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+							"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+							"requires": {
+								"js-tokens": "^3.0.0 || ^4.0.0"
+							}
+						}
+					}
+				}
 			}
 		},
 		"react-event-listener": {
@@ -6253,6 +6383,20 @@
 				"warning": "^3.0.0"
 			}
 		},
+		"react-i18next": {
+			"version": "10.11.4",
+			"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-10.11.4.tgz",
+			"integrity": "sha512-/CWXaf3a5BLNeVnBGxzWOIZLQgSNEc2LWHX4ZaJb7ww0xgY0S5K9HRAMzJIHeHGe7jfpSraprD66VDblWb4ZXA==",
+			"requires": {
+				"@babel/runtime": "^7.3.1",
+				"html-parse-stringify2": "2.0.1"
+			}
+		},
+		"react-is": {
+			"version": "16.8.6",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+			"integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
+		},
 		"react-swipeable-views": {
 			"version": "0.12.13",
 			"resolved": "https://registry.npmjs.org/react-swipeable-views/-/react-swipeable-views-0.12.13.tgz",
@@ -6598,6 +6742,15 @@
 			"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
 			"dev": true
 		},
+		"scheduler": {
+			"version": "0.13.6",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+			"integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+			"requires": {
+				"loose-envify": "^1.1.0",
+				"object-assign": "^4.1.1"
+			}
+		},
 		"schema-utils": {
 			"version": "0.4.5",
 			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
@@ -7154,6 +7307,11 @@
 				"safe-buffer": "^5.1.1"
 			}
 		},
+		"stable": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+			"integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
+		},
 		"static-extend": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -8271,6 +8429,11 @@
 				"indexof": "0.0.1"
 			}
 		},
+		"void-elements": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+			"integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
+		},
 		"warning": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
diff --git a/package.json b/package.json
index 1607c5d..8d4658d 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
 		"@types/react": "^16.0.38",
 		"@types/react-dom": "^16.0.4",
 		"@types/react-swipeable-views": "^0.12.1",
+		"accept-language": "^3.0.18",
 		"babel-polyfill": "^6.26.0",
 		"react": "^16.2.0",
 		"react-dom": "^16.2.0",
diff --git a/scripts/src/app.tsx b/scripts/src/app.tsx
index 335c77a..0f9fceb 100644
--- a/scripts/src/app.tsx
+++ b/scripts/src/app.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-
 import Carousel from "./ui/container/carousel";
 import * as  bridge from "./bridge";
 import ImageAndTextPage from "./ui/page/imageAndText";
diff --git a/scripts/src/language.ts b/scripts/src/language.ts
new file mode 100644
index 0000000..375c9c6
--- /dev/null
+++ b/scripts/src/language.ts
@@ -0,0 +1,47 @@
+import acceptLanguage from "accept-language";
+
+acceptLanguage.languages(["en", "pt"]);
+const language: string = acceptLanguage.get(window.navigator.language) || "en";
+
+export type LocalizedStrings = {
+	yay_youve_earned: string;
+	better_luck_next_time: string;
+	well_done: string;
+	perfect_score: string;
+	thanks_for_trying: string;
+	for_the_effort: string;
+	youve_earned: string;
+};
+
+export type Languages = {
+	[key: string]: LocalizedStrings;
+};
+
+const en: LocalizedStrings = {
+	yay_youve_earned: "Yay! You've earned",
+	better_luck_next_time: "Better Luck Next Time!",
+	well_done: "Well Done!",
+	perfect_score: "High Five!",
+	thanks_for_trying: "Thanks for trying, you've earned",
+	for_the_effort: "for the effort",
+	youve_earned: "You've earned",
+};
+
+const pt: LocalizedStrings = {
+	yay_youve_earned: "Eba! Você ganhou",
+	better_luck_next_time: "Mais Sorte na Próxima Vez!",
+	well_done: "Muito bem!",
+	perfect_score: "Pontuação Perfeita!",
+	thanks_for_trying: "Obrigado por tentar, você ganhou",
+	for_the_effort: "pelo esforço",
+	youve_earned: "Você ganhou",
+};
+
+export const languages: Languages = {
+	en,
+	pt,
+};
+
+export function translate(key: keyof LocalizedStrings): string {
+	return languages[language][key];
+}
diff --git a/scripts/src/ui/page/earnThankYou.tsx b/scripts/src/ui/page/earnThankYou.tsx
index 1d308b3..8e306ae 100644
--- a/scripts/src/ui/page/earnThankYou.tsx
+++ b/scripts/src/ui/page/earnThankYou.tsx
@@ -13,6 +13,8 @@ export interface EarnThankYouProps extends CommonProps {
 
 const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
 
+import { translate } from "../../language";
+
 export class EarnThankYou extends React.Component<EarnThankYouProps> {
 	public componentDidUpdate() {
 		if (this.props.isDisplayed) {
@@ -25,7 +27,7 @@ export class EarnThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<BasePage className="earnThankYou">
 				<div className="text">
-					<div>Yay! You've earned</div>
+					<div>{ translate("yay_youve_earned") }</div>
 					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span className="amount-value" >{this.props.amount}</span></span>
 				</div>
 				<div className={"footer"}>
diff --git a/scripts/src/ui/page/successBasedThankYou.tsx b/scripts/src/ui/page/successBasedThankYou.tsx
index b41921a..4d5da66 100644
--- a/scripts/src/ui/page/successBasedThankYou.tsx
+++ b/scripts/src/ui/page/successBasedThankYou.tsx
@@ -4,6 +4,8 @@ import { CommonProps } from "../../app";
 
 import "../../../../styles/src/page/earnThankYou.styl";
 
+import { translate } from "../../language";
+
 export interface EarnThankYouProps extends CommonProps {
 	isDisplayed: boolean;  // is this the currently displayed page
 	closeHandler(answerData: any): void;
@@ -46,8 +48,8 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<React.Fragment>
 				<div className="text">
-					<h1>Better luck next time!</h1>
-					<h2>you've earned:</h2>
+					<h1>{ translate("better_luck_next_time") }</h1>
+					<h2>{ translate("youve_earned") }:</h2>
 					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span>1</span></span>
 				</div>
 				<div className="footer">
@@ -61,8 +63,8 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<React.Fragment>
 				<div className="text">
-					<h1>Well Done!</h1>
-					<h2>Yay! You've earned:</h2>
+					<h1>{ translate("well_done") }</h1>
+					<h2>{ translate("yay_youve_earned") }:</h2>
 					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span className="amount">{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
 				<div className="footer">
@@ -76,8 +78,8 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<React.Fragment>
 				<div className="text">
-					<h1>High five!</h1>
-					<h2>Yay! You've earned:</h2>
+					<h1>{ translate("perfect_score") }</h1>
+					<h2>{ translate("yay_youve_earned") }:</h2>
 					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span className="amount">{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
 				<div className="footer">
