11import React , { Component } from "react" ;
22import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" ;
33import { faCircle , faDotCircle } from "@fortawesome/free-solid-svg-icons" ;
4- import { bookSetState , scrollToNextStep } from "./book/store" ;
4+ import { bookSetState , scrollToNextStep , bookStatePush } from "./book/store" ;
55import { showCodeResult , terminalRef } from "./App" ;
66import Confetti from "react-dom-confetti" ;
77import { animateScroll } from "react-scroll" ;
8+ import _ from "lodash" ;
89
910const RadioButton = ( { onChange, label, status} ) => (
1011< div className = { "prediction-choice prediction-" + status }
@@ -24,17 +25,16 @@ const RadioGroup = (
2425 onChange,
2526 value,
2627 correctAnswer,
28+ wrongAnswers,
2729 submitted
2830} ) => (
2931< div >
3032{ choices . map ( ( label , i ) => {
3133let status = "" ;
32- if ( submitted ) {
33- if ( correctAnswer === label ) {
34- status = "correct" ;
35- } else if ( value === label ) {
36- status = "wrong" ;
37- }
34+ if ( _ . includes ( wrongAnswers , label ) ) {
35+ status = "wrong" ;
36+ } else if ( submitted && correctAnswer === label ) {
37+ status = "correct" ;
3838} else if ( value === label ) {
3939status = "selected" ;
4040}
@@ -65,6 +65,7 @@ export class OutputPrediction extends Component {
6565 state,
6666 userChoice,
6767 answer,
68+ wrongAnswers,
6869 height
6970} = this . props . prediction ;
7071const confettiActive = state === "showingResult" && answer === userChoice ;
@@ -93,16 +94,28 @@ export class OutputPrediction extends Component {
9394</ div >
9495< RadioGroup
9596choices = { choices }
96- onChange = { value => state === "waiting" && bookSetState ( "prediction.userChoice" , value ) }
97+ onChange = { value =>
98+ state === "waiting" &&
99+ ! _ . includes ( wrongAnswers , value ) &&
100+ bookSetState ( "prediction.userChoice" , value )
101+ }
97102value = { userChoice }
98103correctAnswer = { answer }
104+ wrongAnswers = { wrongAnswers }
99105submitted = { state === "showingResult" || state === "fading" }
100106/>
101107< div style = { { opacity :state === "waiting" ?1 :0 } } >
102108< button
103109className = "btn btn-primary"
104110disabled = { ! userChoice }
105111onClick = { ( ) => {
112+ if ( userChoice !== answer ) {
113+ bookStatePush ( "prediction.wrongAnswers" , userChoice ) ;
114+ if ( wrongAnswers . length === 0 ) {
115+ bookSetState ( "prediction.userChoice" , null ) ;
116+ return ;
117+ }
118+ }
106119bookSetState ( "server" , codeResult . state ) ;
107120scrollToNextStep ( ) ;
108121bookSetState ( "prediction.state" , "showingResult" ) ;