From 286ba7689b7b6de94722c56e6be5bdaceccf759e Mon Sep 17 00:00:00 2001
From: Mrugesh Mohapatra <me@raisedadead.com>
Date: Fri, 24 Apr 2020 18:06:16 +0530
Subject: [PATCH] fix(client): nicer error message and layout update

---
 client/src/templates/Challenges/video/Show.js | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/client/src/templates/Challenges/video/Show.js b/client/src/templates/Challenges/video/Show.js
index 20e8cf38aa..d24b52ebb5 100644
--- a/client/src/templates/Challenges/video/Show.js
+++ b/client/src/templates/Challenges/video/Show.js
@@ -131,6 +131,7 @@ export class Project extends Component {
 
   handleOptionChange = changeEvent => {
     this.setState({
+      showWrong: false,
       selectedOption: parseInt(changeEvent.target.value, 10)
     });
   };
@@ -191,9 +192,7 @@ export class Project extends Component {
                     .
                   </i>
                 </div>
-                <Spacer />
                 <ChallengeDescription description={description} />
-                <Spacer />
                 <SanitizedSpan text={text} />
                 <Spacer />
                 <div className='video-quiz-options'>
@@ -217,6 +216,20 @@ export class Project extends Component {
                   ))}
                 </div>
                 <Spacer />
+                <div
+                  style={{
+                    textAlign: 'center'
+                  }}
+                >
+                  {this.state.showWrong ? (
+                    <span>
+                      Sorry, that's not the right answer. Give it another try?
+                    </span>
+                  ) : (
+                    <span>Click the button below to check your answer.</span>
+                  )}
+                </div>
+                <Spacer />
                 <Button
                   block={true}
                   bsSize='large'
@@ -227,14 +240,6 @@ export class Project extends Component {
                 >
                   Check your answer
                 </Button>
-                <Spacer />
-                <div
-                  style={{
-                    visibility: this.state.showWrong ? 'visible' : 'hidden'
-                  }}
-                >
-                  Wrong. Try again.
-                </div>
                 <Spacer size={2} />
               </Col>
               <CompletionModal blockName={blockName} />