diff --git a/client/src/components/ProfileInfo/index.js b/client/src/components/ProfileInfo/index.js index 2ce5ac8..4e6af40 100644 --- a/client/src/components/ProfileInfo/index.js +++ b/client/src/components/ProfileInfo/index.js @@ -37,7 +37,7 @@ class ProfileInfo extends React.Component { } render() { - const { email, password, name } = this.state; + const { email, name } = this.state; return (
diff --git a/client/src/components/ProfileInfo/styles.scss b/client/src/components/ProfileInfo/styles.scss index 81a4f67..223b6b6 100644 --- a/client/src/components/ProfileInfo/styles.scss +++ b/client/src/components/ProfileInfo/styles.scss @@ -1,5 +1,6 @@ .profile-info-container { - height: 27em; + height: 100%; + width: 100%; border-radius: 2.5px; background-color: #fafafd; .profile-header { @@ -27,29 +28,26 @@ color: #3e3d4a; } .input-container { - width: 25.4em; text-align: center; } .input-label { - left: 3em; - top: 2em; + left: 2em; + top: 3em; background-color: #fafafd; padding: 0 .5em; position: absolute; - width: 8em; z-index: 2; font-family: Georgia; font-size: 20px; color: #3e3d4a; text-align: left; + margin: 0; } .input-label-name { - width: 5em; - top: 5.8em; + top: 6.8em; } .input-label-password { - width: 6.4em; - top: 9.6em; + top: 10.6em; } .change-password-container { text-align: right; diff --git a/client/src/pages/LandingPage/styles.scss b/client/src/pages/LandingPage/styles.scss index c308bf9..72b63a0 100644 --- a/client/src/pages/LandingPage/styles.scss +++ b/client/src/pages/LandingPage/styles.scss @@ -51,7 +51,7 @@ } } -@media (min-width: 1024px) { +@media screen and (min-width: 1024px) { .landing-page-wrapper { width: 100%; background-color: #ffffff; @@ -88,3 +88,13 @@ } } } + +@media screen and (min-width: 220px) and (max-width: 330px) { + .landing-page-wrapper { + .landing-page-container { + .game-title { + font-size: 1.4em; + } + } + } +} diff --git a/client/src/pages/LevelsPage/LevelsPage.js b/client/src/pages/LevelsPage/LevelsPage.js index 8db908c..fac0730 100644 --- a/client/src/pages/LevelsPage/LevelsPage.js +++ b/client/src/pages/LevelsPage/LevelsPage.js @@ -89,7 +89,7 @@ class LevelsPage extends React.Component { key={key} level={data.id} moduleId={moduleId} - prevLevelScore={scores[data.id - 2]} + prevLevelScore={data.id > 1 ? scores[data.id - 2] : 0} currentScore={scores[data.id - 1]} parScore={parScores[data.id - 1]} linkedLevel={data.linked_level} diff --git a/client/src/pages/QuestionsAnsPage/QuestionsAnsPage.js b/client/src/pages/QuestionsAnsPage/QuestionsAnsPage.js index 4aaefd5..d26056b 100644 --- a/client/src/pages/QuestionsAnsPage/QuestionsAnsPage.js +++ b/client/src/pages/QuestionsAnsPage/QuestionsAnsPage.js @@ -9,6 +9,7 @@ import oopsUrl from '../../images/oops.png'; import hurreyUrl from '../../images/hurrey.png'; import AnswerInfoPopup from '../../components/AnswerInfoPopup'; import CorrectAnswerInfo from '../../components/CorrectAnswerInfo'; +import { fetchScores } from '../LandingPage/actions'; import ProgressBar from '../../components/ProgressBar'; import { connect } from 'react-redux'; import './styles.scss'; @@ -83,15 +84,20 @@ export class QuestionsAnsPage extends React.Component { //Handle proceed button click, answer-info dialog box rendering, option click and check for correctAns handleProceedNext = () => { + const { questionId } = this.state; this.setState((prevState) => ({ showAnswer: !prevState.showAnswer, selectedCard: null, answerClicked: 0, clickedOptions: [] })); + window.scrollTo(0, 0); this.handleNextClick(); this.handleClickOpen(); this.checkCorrectAnswer(); + if (questionId === this.getTotalQuestions()) { + this.handleUpdateScore(); + } }; handleClick = () => { @@ -245,6 +251,23 @@ export class QuestionsAnsPage extends React.Component { return scores; }; + handleUpdateScore = () => { + let moduleId = parseInt(this.props.match.params.moduleId); + let level = parseInt(this.props.match.params.levelId); + const { currentScore } = this.state; + const totalScore = this.props.gameData.gameData[moduleId - 1].levels[level - 1].total_score; + + let newScore = currentScore; + let currentLevelNewScores = this.props.gameData.scores[moduleId - 1]; + let prevScore = currentLevelNewScores[level - 1]; + + currentLevelNewScores[level - 1] = + newScore > 0 ? (prevScore + newScore <= totalScore ? prevScore + newScore : totalScore) : prevScore; + + this.props.gameData.scores[moduleId - 1] = currentLevelNewScores; + this.props.getScores(this.props.gameData.scores); + }; + render() { const { answerClick, @@ -260,7 +283,7 @@ export class QuestionsAnsPage extends React.Component { selectedCard, moduleScenario } = this.state; - + let moduleId = parseInt(this.props.match.params.moduleId); let level = parseInt(this.props.match.params.levelId); const totalQuestion = this.getTotalQuestions(); @@ -423,9 +446,15 @@ const mapStateToProps = (state) => { return { gameData: state.gameData }; }; +const mapDispatchToProps = (dispatch) => { + return { + getScores: (scores) => dispatch(fetchScores(scores)) + }; +}; + QuestionsAnsPage.propTypes = { gameData: PropTypes.object, match: PropTypes.object }; -export default connect(mapStateToProps, null)(QuestionsAnsPage); +export default connect(mapStateToProps, mapDispatchToProps)(QuestionsAnsPage); diff --git a/client/src/pages/QuestionsAnsPage/data.js b/client/src/pages/QuestionsAnsPage/data.js index 74fbe73..44bb0ed 100644 --- a/client/src/pages/QuestionsAnsPage/data.js +++ b/client/src/pages/QuestionsAnsPage/data.js @@ -10,7 +10,7 @@ export const gameData = [ id: 1, current_score: 0, par_score: 0, - total_score: 100, + total_score: 60, desc: 'Description1', linked_level: 0, questions: [ @@ -61,9 +61,9 @@ export const gameData = [ }, { id: 5, - question: 'Reasoning', + question: 'Claim', options: [ - 'Using analysis to connect the evidence to the claim', + 'A controversial statement that a debater supports or refutes with evidence and reasoning', "The process of attacking an opponent's arguments", 'This is the Greek word that means both experience and suffering and during a debate focuses on convincing the audience with emotion.', 'A controversial statement that a debater supports or refutes with evidence and reasoning.' @@ -72,53 +72,9 @@ export const gameData = [ }, { id: 6, - question: 'Ethos', - options: [ - 'This is the Greek word for ethics or character and focuses on demonstrating the debaters’ trustworthiness, dependability or preparedness.', - "The process of attacking an opponent's arguments", - 'This is the Greek word that means both experience and suffering and during a debate focuses on convincing the audience with emotion.', - 'A controversial statement that a debater supports or refutes with evidence and reasoning.' - ], - correct_answer: [ 0 ] - }, - { - id: 7, - question: 'Pathos', - options: [ - 'This is the Greek word that means both experience and suffering and during a debate it focuses on convincing the audience with emotion.', - "The process of attacking an opponent's arguments", - 'This is the Greek word that means both experience and suffering and during a debate focuses on convincing the audience with emotion.', - 'A controversial statement that a debater supports or refutes with evidence and reasoning.' - ], - correct_answer: [ 0 ] - }, - { - id: 8, - question: 'Logos', - options: [ - 'This is the Greek word for logic and focuses on the message and appeal to authority or credibility by offering expertise, research, or data to support arguments.', - "The process of attacking an opponent's arguments", - 'This is the Greek word that means both experience and suffering and during a debate focuses on convincing the audience with emotion.', - 'A controversial statement that a debater supports or refutes with evidence and reasoning.' - ], - correct_answer: [ 0 ] - }, - { - id: 9, - question: 'Structural Barrier', - options: [ - 'These are laws, supreme court decisions, and executive branch policies that would keep a new policy from existing.', - "The process of attacking an opponent's arguments", - 'This is the Greek word that means both experience and suffering and during a debate focuses on convincing the audience with emotion.', - 'A controversial statement that a debater supports or refutes with evidence and reasoning.' - ], - correct_answer: [ 0 ] - }, - { - id: 10, - question: 'Attitudinal Barrier', + question: 'Claim', options: [ - 'These are mindsets that would block certain policies or laws. The president (and cabinet), congressional leaders, court justices, interest groups, and the public all have the power to keep policies from existing.', + 'A controversial statement that a debater supports or refutes with evidence and reasoning', "The process of attacking an opponent's arguments", 'This is the Greek word that means both experience and suffering and during a debate focuses on convincing the audience with emotion.', 'A controversial statement that a debater supports or refutes with evidence and reasoning.' @@ -131,7 +87,7 @@ export const gameData = [ id: 2, current_score: 0, par_score: 20, - total_score: 100, + total_score: 30, desc: 'Description2', linked_level: 1, questions: [ @@ -171,8 +127,8 @@ export const gameData = [ { id: 3, current_score: 0, - par_score: 20, - total_score: 100, + par_score: 30, + total_score: 20, desc: 'Description3', linked_level: 2, questions: [ @@ -193,8 +149,8 @@ export const gameData = [ { id: 4, current_score: 0, - par_score: 20, - total_score: 100, + par_score: 40, + total_score: 50, desc: 'Description4', linked_level: 3, questions: [ @@ -225,7 +181,7 @@ export const gameData = [ id: 1, current_score: 0, par_score: 0, - total_score: 100, + total_score: 60, desc: 'DescriptionA', linked_level: 0, questions: [ @@ -268,7 +224,7 @@ export const gameData = [ id: 2, current_score: 0, par_score: 20, - total_score: 100, + total_score: 70, desc: 'DescriptionB', linked_level: 1, questions: [ @@ -290,7 +246,7 @@ export const gameData = [ id: 3, current_score: 0, par_score: 20, - total_score: 100, + total_score: 80, desc: 'DescriptionC', linked_level: 2, questions: [ @@ -320,7 +276,7 @@ export const gameData = [ id: 1, current_score: 0, par_score: 0, - total_score: 100, + total_score: 50, desc: 'DescriptionE', linked_level: 0, questions: [ @@ -551,8 +507,240 @@ export const gameData = [ { id: 2, current_score: 0, + par_score: 40, + total_score: 60, + desc: 'DescriptionF', + linked_level: 0, + questions: [ + { + id: 1, + question: + 'Resolution: There should be a youth quota in the national legislative body.You are arguing the affirmative. Your opponents begin their argument by saying the following: Youth quota does not exist because adult decision makers already represent youth concerns. What counterargument would you present?', + options: [ + { + option: + 'In Guatemala, no forum currently exists to bring together decision makers and youth to capture youth concerns.', + linked_question: 9 + }, + { + option: + 'My parents never accurately represent my concerns. How can adults represent youth concerns?', + linked_question: 3 + } + ] + }, + { + id: 2, + question: + 'Your opponents note that in a past assembly meeting, young people were invited to speak about youth issues. This evidence refutes the claim that decision makers only take into account parents’ opinions.The evidence you provided was not strong enough to refute your opponents claims.', + options: [ { option: '', linked_question: null }, { option: '', linked_question: null } ], + score: 5 + }, + { + id: 3, + question: + 'Your opponents note that in the past 5 assembly meetings, adults have discussed multiple youth issues. Furthermore, one anecdotal example does not refute this evidence and cannot be applied to the population of adult decision-makers as a whole. How do you respond?', + options: [ + { + option: + 'In those past five assembly meetings, four of the five mentions on “youth issues” were voted down without debate by the assembly. ', + linked_question: 4 + }, + { + option: + 'Parents legally represent young people, how youth issues are addressed in assembly meetings is reflective of parents opinions', + linked_question: 2 + } + ] + }, + { + id: 4, + question: + 'Your opponent acknowledges that you are correct about past meetings, however, in the last meeting there was a new amendment passed on youth unemployment. This demonstrates that decision makers are incorporating youth concerns into decision making,', + options: [ + { + option: + 'In the past five years, amendments passed on youth unemployment have yielded less than a 2% increase in jobs for young people. Passing amendments on youth issues without engaging them meaningfully results in laws that don’t fully address the reality of the problem.', + linked_question: 5 + }, + { + option: + 'Including youth issues in one amendment does not erase the need for youth quotas. Youth need real representation and a seat at the table.', + linked_question: 6 + } + ] + }, + { + id: 5, + question: + 'Your opponent responds by saying change takes time and decision makers in the national assembly have a responsibility to more than just young people who only represent 22% of the population. Positive change for all of society will also mean change for young people.', + options: [ + { + option: + 'Youth quotas are not only about representing youth issues. Youth quotas represent an opportunity to demonstrate public acknowledgement of equal value and political know how. This contributes to inclusive societal norms and benefits for society as a whole.', + linked_question: 7 + }, + { + option: + 'Youth candidates will still have expectations and requirements to ensure a quality, capable candidate can be voted for in a democratic process. ', + linked_question: 7 + } + ] + }, + { + id: 6, + question: + 'Your opponent responds by saying youth quotas are an ineffective use of assembly seats. Establishing a quota is the opposite of democracy and does not guarantee that a quality, capable candidate will be chosen. How do you respond?', + options: [ + { + option: + 'Youth candidates will still have expectations and requirements to ensure a quality, capable candidate can be voted for in a democratic process. ', + linked_question: 7 + }, + { + option: + 'Youth quotas are an effective use of assembly seats because they help marginalized populations, such as youth, participate and have their concerns heard.', + linked_question: 8 + } + ] + }, + { + id: 7, + question: + 'Your opponent responds by acknowledging the merits of your argument and requesting additional time to conduct further research for a rebuttal.', + options: [ { option: '', linked_question: null }, { option: '', linked_question: null } ], + score: 10 + }, + { + id: 8, + question: + 'Your opponent responds by saying quotas may give a voice to different populations, but also runs the risk of increased marginalization in the political space. You both agree to conduct more research.', + options: [ { option: '', linked_question: null }, { option: '', linked_question: null } ], + score: 15 + }, + { + id: 9, + question: + 'Your opponents respond by stating that there are other ways to capture youth concerns--through national surveys for example. How would you respond? ', + options: [ + { + option: + 'National surveys have limitations and don’t capture information from all youth demographics. Research shows that youth in rural environments are often undersampled and misrepresented.', + linked_question: 10 + }, + { + option: + 'Simply gathering youth concerns does not ensure decision-maker accountability. They do not capture youth voice.', + linked_question: 11 + } + ] + }, + { + id: 10, + question: + 'Your opponents acknowledge the possibility of sampling bias but conclude that youth quotas also do not represent ALL youth concerns. There may be bias among those chosen to serve in the national legislative body.', + options: [ + { + option: + 'You state that while youth quotas are not able to capture all youth concerns, a small budget could be set aside for a youth and adult coalition to conduct research. This unites members of the national legislative body with a common goal of more inclusively representing constituents and provides space for young elected officials.', + linked_question: 14 + }, + { + option: + 'National surveys are a good start, but that information does not produce the same outcomes as young people at the table working collaboratively with decisions makers.', + linked_question: 13 + } + ] + }, + { + id: 11, + question: + 'Your opponent states that there are other mechanisms in place that ensure accountability and capture the voices of all citizens. The national legislative body recently voted on a measure to increase youth centers in rural communities based on recommendations from community members. How do you respond?', + options: [ + { + option: + 'Occasional outcomes that benefit youth do not demonstrate the full picture. Research states that decision making bodies have miscalculated what youth need repetitively over the past decade resulting in initiatives like a youth center built last year that sits in disuse and disrepair.', + linked_question: 13 + }, + { + option: + 'Youth centers are not what young people need, they need basic needs like employment and adequate healthcare!', + linked_question: 12 + } + ] + }, + { + id: 12, + question: + 'Your opponent states that unemployment and healthcare are priorities for the current administration, as evidenced by the 20% reduction in homelessness and the bill passed for universal healthcare. This demonstrates that youth concerns are being addressed by the national agenda. You believe your opponent’s argument has merit and decide to conduct more research.', + options: [ + { + option: '', + linked_question: null + }, + { + option: '', + linked_question: null + } + ], + score: 10 + }, + { + id: 13, + question: + 'Your opponent states that outcomes for youth are measured by outcomes for all of society. For example, in the past year there has been a 20% decrease in homelessness and a bill passed for universal healthcare. How do you respond?', + options: [ + { + option: + 'You state that societal outcomes do not always benefit young people the same as other members of society. Youth quotas can help establish youth-inclusive practices that demonstrate faith in young people’s abilities to contribute.', + linked_question: 14 + }, + { + option: + 'You state that youth quotas are not only for youth. Youth participation in the national assembly demonstrates the assets and capacity youth have which has positive outcomes on all of society. This is demonstrated by youth quotas in other countries around the world.', + linked_question: 15 + } + ] + }, + { + id: 14, + question: + 'Your opponent acknowledges the strength of your argument and the need to do further research to respond.', + options: [ + { + option: '', + linked_question: null + }, + { + option: '', + linked_question: null + } + ], + score: 15 + }, + { + id: 15, + question: + 'Your opponent acknowledges the strength of your argument and the need to do further research to respond.', + options: [ + { + option: '', + linked_question: null + }, + { + option: '', + linked_question: null + } + ], + score: 10 + } + ] + }, + { + id: 3, + current_score: 0, par_score: 10, - total_score: 100, + total_score: 70, desc: 'DescriptionF', linked_level: 0, questions: [ @@ -783,3 +971,4 @@ export const gameData = [ ] } ]; + \ No newline at end of file diff --git a/client/src/pages/ScenarioBased/ScenarioQuesAns.js b/client/src/pages/ScenarioBased/ScenarioQuesAns.js index 1e7e6b8..8ee7e9a 100644 --- a/client/src/pages/ScenarioBased/ScenarioQuesAns.js +++ b/client/src/pages/ScenarioBased/ScenarioQuesAns.js @@ -177,6 +177,8 @@ export class ScenarioQuesAns extends React.Component { } ); } + window.scrollTo(0, 0); + this.setState((prevState) => ({ selectedCard: null, answerClicked: 0, @@ -190,7 +192,6 @@ export class ScenarioQuesAns extends React.Component { //Checks if current score + previous score is less than parScore and return parScoreStatus. checkParScoreStatus = () => { - let moduleId = parseInt(this.props.match.params.moduleId); let level = parseInt(this.props.match.params.levelId); const { currentScore } = this.state; @@ -199,7 +200,7 @@ export class ScenarioQuesAns extends React.Component { let prevScore = currentLevelNewScores[level - 1]; if (prevScore + currentScore < parScores[level]) { this.setState({ parScoreStatus: false }); - } else { + } else { this.setState({ parScoreStatus: true }); } this.render(); diff --git a/client/src/settings.js b/client/src/settings.js index c325501..64438df 100644 --- a/client/src/settings.js +++ b/client/src/settings.js @@ -1,7 +1,9 @@ let config = {}; if (process.env.NODE_ENV === 'development') { - config = { baseUrl: 'http://localhost:9000' }; + // config = { baseUrl: 'http://localhost:9000' }; + // 192.168.13.86 is ip of network you are connected to change it with your ip address. + config = { baseUrl: 'http://192.168.13.86:9000' }; } else if (process.env.NODE_ENV === 'production') { config = { baseUrl: '' }; }