From 2b196a9f7fe5f96037a6b8fbeacdd42bc5a4b848 Mon Sep 17 00:00:00 2001 From: Saugat Pandey Date: Tue, 14 Mar 2023 01:12:36 -0500 Subject: [PATCH] adding elements to score page --- .../surveys/quiz/xGc_iJ_5RI-B0PRBROEN-w.txt | 1 + ReactTool/frontend/src/pages/thank_you.js | 58 ++++++++++--------- .../frontend/src/pages/visualization_quiz.js | 52 +++++++---------- 3 files changed, 54 insertions(+), 57 deletions(-) create mode 100644 ReactTool/backend/surveys/quiz/xGc_iJ_5RI-B0PRBROEN-w.txt diff --git a/ReactTool/backend/surveys/quiz/xGc_iJ_5RI-B0PRBROEN-w.txt b/ReactTool/backend/surveys/quiz/xGc_iJ_5RI-B0PRBROEN-w.txt new file mode 100644 index 0000000..1c3a779 --- /dev/null +++ b/ReactTool/backend/surveys/quiz/xGc_iJ_5RI-B0PRBROEN-w.txt @@ -0,0 +1 @@ +{"session_id": "xGc_iJ_5RI-B0PRBROEN-w", "responses": {}, "mini_responses": {"What distance have customers traveled in the taxi the most?": {"response": "30 - 40 Km", "truth": 1, "time": 0.488}, "In 2020, the unemployment rate for Washington (WA) was higher than that of Wisconsin (WI).": {"response": "True", "truth": 0, "time": 0.155}, "Which country has the lowest proportion of Gold medals?": {"response": "U.S.A.", "truth": 0, "time": 0.199}, "What is the approximate global smartphone market share of Samsung?": {"response": "25.3%", "truth": 0, "time": 0.21}, "What was the price of a barrel of oil in February 2020?": {"response": "$47.02", "truth": 0, "time": 0.18}, "What was the ratio of girls named 'Isla' to girls named 'Amelia' in 2012 in the UK?": {"response": "1 to 2", "truth": 1, "time": 0.178}, "What is the cost of peanuts in Seoul?": {"response": "$5.2", "truth": 0, "time": 0.151}, "Which city's metro system has the largest number of stations?": {"response": "Shanghai", "truth": 1, "time": 0.146}, "There is a negative linear relationship between the height and the weight of the 85 males.": {"response": "True", "truth": 1, "time": 0.133}, "eBay is nested in the Software category.": {"response": "True", "truth": 1, "time": 0.089}, "What is the average internet speed in Japan?": {"response": "40.51 Mbps", "truth": 1, "time": 0.125}, "What was the average price of pount of coffee beans in October 2019?": {"response": "$0.90", "truth": 0, "time": 0.491}}, "score": 0, "mini_score": 5, "device": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36", "demographic_responses": {"sex": "male", "age": "21", "education": "associate", "familiarity": "somewhat", "color-blind": "no"}, "comment": "", "height": 870, "width": 1512} diff --git a/ReactTool/frontend/src/pages/thank_you.js b/ReactTool/frontend/src/pages/thank_you.js index 4ae0d52..4059f09 100644 --- a/ReactTool/frontend/src/pages/thank_you.js +++ b/ReactTool/frontend/src/pages/thank_you.js @@ -1,7 +1,8 @@ -import React, {Component} from 'react'; -import {Col, Row, Button, InputGroup, FormControl} from 'react-bootstrap'; -import {CopyToClipboard} from 'react-copy-to-clipboard'; -import {score_2} from './visualization_quiz'; +import React, { Component } from 'react'; +import { Col, Row, Button, InputGroup, FormControl } from 'react-bootstrap'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { score_2 } from './visualization_quiz'; +import { record_ques } from './visualization_quiz'; class ThankYou extends Component { @@ -18,9 +19,33 @@ class ThankYou extends Component { }) } } + renderTable() { + return ( + + + + + + + + + {Object.entries(record_ques).map(([question, answer]) => ( + + + + + ))} + +
QuestionResult
{question} + {answer === 'Correct' ? ✔ : answer === 'Wrong' ? ❌ : answer} +
+ ); + } render() { console.log('attempting to render') + console.log("The keys of the dictionary is: " + Object.keys(record_ques)) + console.log("The values of the dictionary is: " + Object.values(record_ques)) if (this.props.location.state == null) { return (

Unknown session. Please start from the consent page

) @@ -33,30 +58,9 @@ class ThankYou extends Component { return ( -

You scored {score_2} out of 12. Thank you for participating in our study. Your responses have been recorded.

- - - {/* - - - - this.setState({copied: true})}> - - - - */} - - +

You scored {score_2} out of 12. Thank you for participating in our study. Your responses have been recorded.

+ {this.renderTable()} - ); diff --git a/ReactTool/frontend/src/pages/visualization_quiz.js b/ReactTool/frontend/src/pages/visualization_quiz.js index 6fbdb3f..2db2a2c 100644 --- a/ReactTool/frontend/src/pages/visualization_quiz.js +++ b/ReactTool/frontend/src/pages/visualization_quiz.js @@ -33,32 +33,27 @@ import img12 from '../components/data/VLAT-Pics/LineChart.png' let minivis = [ - { 'vis': BarChartMini, 'type': 'BarChart', 'question': 'What is the average internet speed in Japan?', 'options': ["42.30 Mbps", "40.51 Mbps", "35.25 Mbps", "16.16 Mbps", "Skip"], 'correct_answer': 1, 'cimage': img9 }, - { 'vis': AreaChartMini, 'type': 'AreaChart', 'question': 'What was the average price of pount of coffee beans in October 2019?', 'options': ["$0.71", "$0.90", "$0.80", "$0.63", "Skip"], 'correct_answer': 0, 'cimage': img10 }, - { 'vis': BubbleChartMini, 'type': 'BubbleChart', 'question': 'Which city\'s metro system has the largest number of stations?', 'options': ['Beijing', 'Shanghai', 'London', 'Seoul', "Skip"], 'correct_answer': 1, 'cimage': img3 }, + { 'vis': BarChartMini, 'type': 'Bar Chart', 'question': 'What is the average internet speed in Japan?', 'options': ["42.30 Mbps", "40.51 Mbps", "35.25 Mbps", "16.16 Mbps", "Skip"], 'correct_answer': 1, 'cimage': img9 }, + { 'vis': AreaChartMini, 'type': 'Area Chart', 'question': 'What was the average price of pount of coffee beans in October 2019?', 'options': ["$0.71", "$0.90", "$0.80", "$0.63", "Skip"], 'correct_answer': 0, 'cimage': img10 }, + { 'vis': BubbleChartMini, 'type': 'Bubble Chart', 'question': 'Which city\'s metro system has the largest number of stations?', 'options': ['Beijing', 'Shanghai', 'London', 'Seoul', "Skip"], 'correct_answer': 1, 'cimage': img3 }, { 'vis': ChoroplethMini, 'type': 'Choropleth', 'question': 'In 2020, the unemployment rate for Washington (WA) was higher than that of Wisconsin (WI).', 'options': ['True', 'False', "Skip"], 'correct_answer': 0, 'cimage': img8 }, { 'vis': HistogramMini, 'type': 'Histogram', 'question': 'What distance have customers traveled in the taxi the most?', 'options': ["60 - 70 Km", "30 - 40 Km", "20 - 30 Km", "50 - 60 Km", "Skip"], 'correct_answer': 1, 'cimage': img6 }, - { 'vis': LineChartMini, 'type': 'LineChart', 'question': 'What was the price of a barrel of oil in February 2020?', 'options': ["$50.54", "$47.02", "$42.34", "$42.34", "Skip"], 'correct_answer': 0, 'cimage': img12 }, - { 'vis': TreeMapMini, 'type': 'TreeMap', 'question': 'eBay is nested in the Software category.', 'options': ['True', 'False', 'Skip'], 'correct_answer': 1, 'cimage': img4 }, - { 'vis': ScatterPlotMini, 'type': 'ScatterPlot', 'question': 'There is a negative linear relationship between the height and the weight of the 85 males.', 'options': ['True', 'False', 'Skip'], 'correct_answer': 1, 'cimage': img1 }, - { 'vis': StackedBarChartMini, 'type': 'StackedBarChart', 'question': 'Which country has the lowest proportion of Gold medals?', 'options': ["Great Britain", "U.S.A.", "Japan", "Australia", 'Skip'], 'correct_answer': 0, 'cimage': img5 }, - { 'vis': StackedAreaPlotMini, 'type': 'StackedAreaPlot', 'question': 'What was the ratio of girls named \'Isla\' to girls named \'Amelia\' in 2012 in the UK?', 'options': ["1 to 1", "1 to 2", "1 to 3", "1 to 4", "Skip"], 'correct_answer': 1, 'cimage': img7 }, - { 'vis': StackedBarChart2Mini, 'type': 'StackedBarChart2', 'question': 'What is the cost of peanuts in Seoul?', 'options': ["$6.1", "$5.2", "$7.5", "$4.5", "Skip"], 'correct_answer': 0, 'cimage': img2 }, - { 'vis': PieChartMini, 'type': 'PieChart', 'question': 'What is the approximate global smartphone market share of Samsung?', 'options': ["17.6%", "25.3%", "10.9%", "35.2%", 'Skip'], 'correct_answer': 0, 'cimage': img11 } + { 'vis': LineChartMini, 'type': 'Line Chart', 'question': 'What was the price of a barrel of oil in February 2020?', 'options': ["$50.54", "$47.02", "$42.34", "$42.34", "Skip"], 'correct_answer': 0, 'cimage': img12 }, + { 'vis': TreeMapMini, 'type': 'Treemap', 'question': 'eBay is nested in the Software category.', 'options': ['True', 'False', 'Skip'], 'correct_answer': 1, 'cimage': img4 }, + { 'vis': ScatterPlotMini, 'type': 'Scatterplot', 'question': 'There is a negative linear relationship between the height and the weight of the 85 males.', 'options': ['True', 'False', 'Skip'], 'correct_answer': 1, 'cimage': img1 }, + { 'vis': StackedBarChartMini, 'type': '100% Stacked Bar', 'question': 'Which country has the lowest proportion of Gold medals?', 'options': ["Great Britain", "U.S.A.", "Japan", "Australia", 'Skip'], 'correct_answer': 0, 'cimage': img5 }, + { 'vis': StackedAreaPlotMini, 'type': 'Stacked Area', 'question': 'What was the ratio of girls named \'Isla\' to girls named \'Amelia\' in 2012 in the UK?', 'options': ["1 to 1", "1 to 2", "1 to 3", "1 to 4", "Skip"], 'correct_answer': 1, 'cimage': img7 }, + { 'vis': StackedBarChart2Mini, 'type': 'Stacked Bar', 'question': 'What is the cost of peanuts in Seoul?', 'options': ["$6.1", "$5.2", "$7.5", "$4.5", "Skip"], 'correct_answer': 0, 'cimage': img2 }, + { 'vis': PieChartMini, 'type': 'Pie Chart', 'question': 'What is the approximate global smartphone market share of Samsung?', 'options': ["17.6%", "25.3%", "10.9%", "35.2%", 'Skip'], 'correct_answer': 0, 'cimage': img11 } ]; +var record_ques = {} - -var score_1 = 0 var score_2 = 0 let initTime = 0 let endTime = 0 var num = 12 -//var correct_collec = [] -//var wrong_collec = [] -var correct_collect = [] -var wrong_collect = [] -var random_list = [0, 1] + class VisQuiz extends Component { @@ -135,6 +130,14 @@ class VisQuiz extends Component { device_info: navigator.userAgent }) score_2 = this.state.mini_score + + if (response === minivis[this.state.current_mini_index]['options'][truth]) { + record_ques[type] = 'Correct' + } + else { + record_ques[type] = 'Wrong' + } + console.log("The dictionary is: ", record_ques) } @@ -208,15 +211,9 @@ class VisQuiz extends Component { current_mini_index: this.state.current_mini_index + 1, }) } - randomChoose() { - return random_list[Math.floor(Math.random() * random_list.length)] - } render() { - //console.log("Random number is ", this.randomChoose()) - //const { refCallback, time } = this.props; - console.log("Random array is ", this.randomChoose()) const hoursMinSecs = { hours: 0, minutes: 0, seconds: 10 } initTime = Date.now() console.log("Starting Time is : " + initTime) @@ -236,10 +233,7 @@ class VisQuiz extends Component { } if (this.state.current_mini_index < this.state.list_of_min_vis.length) { const options = minivis[this.state.current_mini_index]['options'].map((item, i) => - // +