Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a67415a

Browse files
author
smishra38@sapient.com
committed
Adding Interactivity for Q&A for the user
1 parent 864b772 commit a67415a

File tree

3 files changed

+119
-41
lines changed

3 files changed

+119
-41
lines changed

‎public/_assets/css/app.css

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
2+
.posRelative{
3+
position: relative;
4+
}
15
.footer{
26
position: absolute;
3-
7+
bottom:-10px;
48
padding-left: 60px;
59
}
610
.question {
@@ -16,5 +20,31 @@
1620
}
1721

1822
.options:hover {
19-
background-color: #C3FAF4;
23+
background-color: #D0EFF6;
24+
}
25+
.navbar{
26+
padding: 20px;
27+
}
28+
29+
.pass{
30+
height: 100%;
31+
background-color: green;
32+
position: absolute;
33+
display: inline-flex;
34+
}
35+
.fail{
36+
height: 100%;
37+
background-color: red;
38+
position: absolute;
39+
display: inline-flex;
40+
}
41+
42+
.marTop25{
43+
margin-top: 25px;
44+
}
45+
.nextBtn:hover{
46+
background-color: #B4C2C5;
47+
}
48+
.noPadRight{
49+
padding-right: 0;
2050
}

‎public/index.html

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<title>React App</title>
99
</head>
1010
<body>
11-
<div class="jumbotron">
11+
<div class="jumbotron navbar">
1212
<div class="container">
1313
<h1>Javascript Quiz </h1>
1414
<p>Select the correct answer of following question</p>
@@ -26,11 +26,9 @@ <h1>Javascript Quiz </h1>
2626

2727

2828
<div class="footer container">
29-
<div class="">
30-
<p class="credit text-muted">
31-
All questions are provided by experts.
32-
</p>
33-
</div>
29+
<p class="credit text-muted">
30+
All questions are provided by experts.
31+
</p>
3432
</div>
3533
<script src="_assets/thirdparty/jquery.js"></script>
3634
<script src="_assets/thirdparty/dist/js/bootstrap.js"></script>

‎src/index.js

Lines changed: 83 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
33
//import PropTypes from 'prop-types';
44

55
function shuffleArray(array) {
6-
//if(typeof array !== 'object') return;
76
let i = array.length - 1;
87
for (; i > 0; i--) {
98
const j = Math.floor(Math.random() * (i + 1));
@@ -16,78 +15,129 @@ function shuffleArray(array) {
1615
class Quiz extends React.Component{
1716
constructor(props, context) {
1817
super(props, context);
19-
18+
this.refreshQuestion = this.refreshQuestion.bind(this)
19+
this.state = {
20+
change:false
21+
}
22+
}
23+
refreshQuestion(){
24+
console.log(this);
25+
this.setState({
26+
change:true
27+
})
2028
}
2129
render () {
2230
var shuffledPosts = shuffleArray(this.props.data);
23-
console.log(shuffledPosts[0]);
2431
return <div>
25-
<div className="row">
32+
<div className="row posRelative">
2633
<div className="col-md-10">
27-
<Question data={shuffledPosts[0].question} />
28-
29-
30-
<Options data={shuffleArray(shuffledPosts[0].options)} />
34+
<Question data={shuffledPosts[0].question} />
3135
</div>
32-
<div className="col-md-2">
36+
<Options data={(shuffledPosts[0])} />
37+
3338

34-
</div>
39+
</div>
40+
<div className="col-md-10 noPadRight">
41+
<button onClick={this.refreshQuestion} className="marTop25 nextBtn btn col-md-2 pull-right">Next Question</button>
3542
</div>
3643
</div>;
3744
}
3845
}
3946
class Question extends React.Component{
4047
render () {
41-
//shuffledPosts[0].answer is the answer
4248
return <div className="lead question">
4349
<h3>{this.props.data}</h3>
4450
</div>
4551
}
4652
}
4753

4854
class Options extends React.Component{
55+
constructor(props) {
56+
super(props)
57+
this.state = {
58+
bgClass :'neutral'
59+
}
60+
}
61+
handleClick (valClicked){
62+
var isCorrect = valClicked.value === this.props.data.key;
63+
this.setState({
64+
bgClass : isCorrect ? 'pass' : 'fail',
65+
showContinue: isCorrect
66+
})
67+
}
68+
componentWillReceiveProps(nextProps){
69+
this.setState({
70+
bgClass : 'neutral'
71+
})
72+
}
4973
render () {
50-
//console.log(this.props.data)
51-
// return <div className="option">
52-
// <h4>{this.props.data}</h4>
53-
// </div>
54-
55-
var options = this.props.data;
74+
var options = this.props.data.options;
5675
return (
5776
<div>
58-
{options.map(function(value, index){
59-
console.log(index)
60-
return <div className="strong options" key={ index }>
61-
<h4> {index+1}. {value} </h4>
62-
</div>;
63-
})}
77+
<div className="col-md-10">
78+
{options.map((value, index) => {
79+
return <div onClick={this.handleClick.bind(this,{value})} className="strong options" key={index}>
80+
<h4> {index+1}. {value} </h4>
81+
</div>;
82+
} , this)}
83+
</div>
84+
<Answer className={this.state.bgClass}/>
6485
</div>
6586
)
6687
}
6788
}
6889

69-
// Quiz.PropTypes = {
70-
// books: PropTypes.bool.isRequired,
71-
// }
72-
// Book.PropTypes = {
73-
// b: PropTypes.string
74-
// }
90+
class Answer extends React.Component{
91+
// constructor(props){
92+
// super(props);
93+
// }
94+
render(){
95+
return <div className={this.props.className + ' col-md-1'}> </div>
96+
}
97+
98+
}
7599

76100
var data = [
77101
{
78102
question: "What is the Javscript compiler name in Google Chrome?",
79-
options: ["Chrome V8", "Chrome V7","Chrome V9","Chrome V6"],
80-
answer: "Chrome V8"
103+
options: ["Chrome V6", "Chrome V7","Chrome V8","Chrome V9"],
104+
key: "Chrome V8"
81105
},
82106
{
83107
question: "How can you detect the client's browser name?",
84108
options: ["navigator.userAgent", "navigator.browser","browser.appName" ,"app.browserName"],
85-
answer: "I am answer 2"
109+
key: "navigator.userAgent"
86110
},
87111
{
88112
question: "Nearly all objects in JavaScript are instances of which of the following?",
89113
options: ["Object", "_proto_","Prototypes" ,"DOM"],
90-
answer: "I am answer 3"
114+
key: "Object"
115+
},
116+
{
117+
question: "Which of the following is a correct way to empty an array?",
118+
options: ["arrayName.empty();", "arrayName.splice(0, arrayList.length);","arrayName = null;" ,"arrayName = Obejct.empty();"],
119+
key: "arrayName.splice(0, arrayList.length);"
120+
},
121+
{
122+
question: "Which of the following is not a React Component Lifecycle method?",
123+
options: ["componentWillUpdate ", "componentDidUpdate ","componentWillUnmount " ,"componentGoingToUpdate"],
124+
key: "componentGoingToUpdate"
125+
},
126+
{
127+
question: "In Experience Technology world, What does MEAN stand for?",
128+
options: [ "Mongodb, ES6, Angularjs and Node",
129+
"Mongodb, Ember, Angularjs and Node" ,
130+
"Mongodb, Express, Angularjs and Node",
131+
"Meteor, Express, Angularjs and Node"],
132+
key: "Mongodb, Express, Angularjs and Node"
91133
}
92134
]
135+
136+
// Quiz.PropTypes = {
137+
// books: PropTypes.bool.isRequired,
138+
// }
139+
// Book.PropTypes = {
140+
// b: PropTypes.string
141+
// }
142+
93143
ReactDOM.render(<Quiz data={data} />, document.getElementById('root'));

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /