fix(client): nicer error message and layout update

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} />