Last active
February 21, 2024 21:34
-
-
Save igorbenic/fc7d73f33b747a7ee357ba23a9e53f33 to your computer and use it in GitHub Desktop.
Revisions
-
igorbenic revised this gist
May 15, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -15,7 +15,7 @@ class Question extends Component { for( let i = 0; i < this.props.question.answers.length; i++ ) { // We are pushing the them because each Answer is a React element. // We can render an array of React elements using JSX. answers.push( <Answer answer={this.props.question.answers[i]} key={this.props.question.id + '_' + i} index={i} question={this.props.question.id} setAnswer={this.props.setAnswer} /> ); } if( answers.length > 0 ) { // If we have answers, let's change the answer to JSX -
May 3, 2018 . 4 changed files with 98 additions and 81 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,81 +0,0 @@ This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,25 @@ import React, { Component } from 'react'; class Answer extends Component { constructor(){ super(); // Binding handleChange to 'this' this.handleChange = this.handleChange.bind(this); } handleChange(e) { // Using the passed method setAnswer to set the answer. this.props.setAnswer(e.target.value, this.props.question); } render() { return ( <li className="wpqr-answer"> <label> <input type="radio" onChange={this.handleChange} name={this.props.question} value={this.props.index} /> { this.props.answer } </label> </li> ); } } export default Answer; This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,35 @@ import React, { Component } from 'react'; import Answer from './Answer'; /** * Question Component. * * Rendering the Question with the provided answers. */ class Question extends Component { render() { let answers = []; // If we have answers, let's add them. if ( this.props.question.answers ) { // For each answer, add an Answer Component. for( let i = 0; i < this.props.question.answers.length; i++ ) { // We are pushing the them because each Answer is a React element. // We can render an array of React elements using JSX. answers.push( <Answer answer={this.props.question.answers[i]} key={i} index={i} question={this.props.question.id} setAnswer={this.props.setAnswer} /> ); } if( answers.length > 0 ) { // If we have answers, let's change the answer to JSX answers = <ul>{answers}</ul>; } } return ( <div className="wpqr-question"> <h2>{this.props.question.title}</h2> <div>{this.props.question.content}</div> { answers } </div> ); } } export default Question; This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,38 @@ import React, { Component } from 'react'; // Importing the Question Component so we can use it. import Question from './components/Question'; import './Quiz.css'; /* global wpqr */ class Quiz extends Component { // ... render() { let output = 'Loading Questions...'; let button = ''; if( this.state.score.length ) { output = 'This will be a Score Component'; } else { // ... // If we have questions, load the current question. if ( this.state.questions.length > 0 ) { const currentQuestion = this.state.questions[ this.state.currentQuestion ]; // Passing the setAnswer method and the current question. output = <Question setAnswer={this.setAnswer} question={currentQuestion} />; // ... } // ... } return ( <div className="App"> { output } { button } </div> ); } } export default Quiz; -
May 3, 2018 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,81 @@ import React, { Component } from 'react'; import Question from './components/Question'; import './Quiz.css'; /* global wpqr */ class Quiz extends Component { constructor() { super(); this.state = { questions : [], answers: {}, currentQuestion: 0, lastQuestion: false, score: [] }; this.setNextQuestion = this.setNextQuestion.bind(this); this.fetchQuestions = this.fetchQuestions.bind(this); this.setAnswer = this.setAnswer.bind(this); this.getScore = this.getScore.bind(this); this.fetchQuestions(); } fetchQuestions() { fetch(wpqr.rest_url + 'wpqr/v1/questions' ).then( resp => { return resp.json(); } ).then( json => { this.setState({ questions: json }); if ( json.length < 2 ) { this.setState({ lastQuestion: true });} }); } setNextQuestion() { let currentQuestion = this.state['currentQuestion']; const questionsCount = this.state['questions'].length; currentQuestion++; if ( questionsCount > currentQuestion ) { this.setState({ currentQuestion: currentQuestion }); if( questionsCount === currentQuestion + 1 ) { this.setState( { lastQuestion: true} ); } } } setAnswer( answer, question ) { let answers = this.state.answers; answers[ question ] = answer; this.setState({ answers: answers }); } getScore() { // Building the QueryString var queryString = []; for(var answer in this.state.answers ) { queryString.push(encodeURIComponent('answers[' + answer + ']') + "=" + encodeURIComponent(this.state.answers[answer])); } fetch(wpqr.rest_url + 'wpqr/v1/result', { method: 'POST', headers: { "Content-type": "application/x-www-form-urlencoded"}, body: queryString.join('&'), }).then( resp => { return resp.json(); } ).then( json => this.setState({ score: [json] }) ); } render() { let output = 'Loading Questions...'; let button = ''; if( this.state.score.length ) { output = 'SCORE'; } else { let buttonDisabled = true; if ( this.state.questions.length > 0 ) { const currentQuestion = this.state.questions[ this.state.currentQuestion ]; output = <Question setAnswer={this.setAnswer} question={currentQuestion} />; if( this.state.answers.hasOwnProperty( currentQuestion.id ) ) { buttonDisabled = false; } } button = <button disabled={buttonDisabled} onClick={this.setNextQuestion} type="button">Next Question</button>; if( this.state.lastQuestion ) { button = <button disabled={buttonDisabled} onClick={this.getScore} type="button">Get Score</button>; } } return ( <div className="App"> { output } { button } </div> ); } } export default Quiz;