@@ -87,6 +87,7 @@ export class OutputPrediction extends Component {
8787message = "Sorry, wrong answer. Try again next time!" ;
8888}
8989
90+ const userFailed = wrongAnswers . length === 2 ;
9091return < div
9192className = "output-prediction"
9293style = { {
@@ -110,33 +111,40 @@ export class OutputPrediction extends Component {
110111< CorrectConfetti active = { confettiActive } />
111112< div > < strong > { message } </ strong > </ div >
112113< button
113- style = { { opacity :state === "waiting" ?1 :0 } }
114+ style = { {
115+ opacity :
116+ state === "waiting" ||
117+ ( state === "showingResult" && userFailed )
118+ ?1 :0
119+ } }
114120className = "btn btn-primary"
115- disabled = { ! userChoice }
121+ disabled = { ! userChoice && ! userFailed }
116122onClick = { ( ) => {
117- if ( userChoice !== answer ) {
123+ if ( userChoice !== answer && ! userFailed ) {
118124bookStatePush ( "prediction.wrongAnswers" , userChoice ) ;
119- if ( wrongAnswers . length === 0 ) {
120- bookSetState ( "prediction.userChoice" , null ) ;
121- return ;
125+ bookSetState ( "prediction.userChoice" , null ) ;
126+ if ( wrongAnswers . length === 1 ) {
127+ bookSetState ( "prediction.state" , "showingResult" ) ;
122128}
129+ return ;
123130}
124131bookSetState ( "server" , codeResult . state ) ;
125132scrollToNextStep ( ) ;
126133bookSetState ( "prediction.state" , "showingResult" ) ;
127134setTimeout ( ( ) => animateScroll . scrollToBottom ( {
128135duration :30 ,
129136container :terminalRef . current . terminalRoot . current
130- } ) )
137+ } ) ) ;
138+ const timeToFade = userFailed ?0 :3000 ;
131139setTimeout ( ( ) => {
132140bookSetState ( "prediction.state" , "fading" ) ;
133141bookSetState ( "prediction.height" , 0 ) ;
134142showCodeResult ( codeResult ) ;
135- } , 3000 ) ;
136- setTimeout ( ( ) => bookSetState ( "prediction.state" , "hidden" ) , 4000 ) ;
143+ } , timeToFade ) ;
144+ setTimeout ( ( ) => bookSetState ( "prediction.state" , "hidden" ) , timeToFade + 1000 ) ;
137145} }
138146>
139- Submit
147+ { userFailed ? "OK" : " Submit" }
140148</ button >
141149</ div >
142150</ div >