猿问

存储来自 mongodb 的值并验证

我一直对php和sql比较感兴趣,但是我决定更多地了解js。所以,我创建了测验应用程序。(reactjs、nodejs 和 mongodb)应用程序可以运行!几乎。有些事情我不满意,我不知道如何解决。


api.js


router.get('/', (req, res) => {

    Quiz.aggregate([ { $sample: { size: 1 } } ])

        .then((data) => {

            console.log('Data: ', data);

            res.json(data);

        })

        .catch((error) => {

            console.log('erorr: ', error)

        })

});


应用程序.js


  getQuestionAndAnswers = () => {

    axios.get('http://localhost:8080/api')

      .then((response) => {

        const data = response.data;

        this.setState({posts: data});

        console.log('Data has been received');

      })

      .catch(() => {

        alert('Error retrieving data');

      })

  }



 displayQuiz = (posts) => {

    if (!posts.length) return null


    return posts.map((post, index) => (

      <div key={index}>

        <p>{post.question}</p>

        <button value={post.answer} onClick={(e) => this.checkAnswer(e, post)}><p>A. {post.answer}</p></button>

        <button value={post.answer2} onClick={(e) => this.checkAnswer(e, post)}><p>B. {post.answer2}</p></button>

      </div>

    ));

  };



 checkAnswer = (e,post) => {

    console.log(e.currentTarget.value);

    if(e.currentTarget.value === post.c_answer){

      console.log('correct');

    }else{

      console.log('incorrect');

    }

  };



正如您所看到的,我将数据存储在按钮值中,我认为这不是最好的解决方案,因为存储在那里的答案可能非常大,但我不知道如何做得更好。所以,我必须更改答案检查,因为此时,我将正确答案与单击的值进行比较,是否有更好的解决方案?


我想添加一个函数,由于错误的答案会将颜色更改为红色,而正确的答案会将颜色更改为绿色,我想在执行 if() 后添加 css 类就足够了。对于我点击的按钮来说,做到这一点并不困难,但是其余的呢?


感谢您的任何建议!


郎朗坤
浏览 76回答 0
0回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答