Rev 442 | Rev 453 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from "react";
import Option from "../option/Option";
const Question = (props) => {
// get props
const { question, backendVars, handleAnswer } = props;
return (
<div className="col-md-12 col-sm-12 col-xs-12 np-padding">
<div className="form-group" >
<h6>{backendVars.LBL_QUESTION} #{question.position + 1}</h6>
<div
dangerouslySetInnerHTML={{ __html: question.text }}
className="title"
/>
</div>
{question.type == 'open' &&
<div className="form-group">
{question.multiline == 1 ? (
<textarea
className="form-control"
rows="5"
value={question.answer}
maxLength={question.maxlength}
name={question.slug_question}
onChange={e =>
handleAnswer(question.slug_section, question.slug_question, e.target.value)
}
/>
) : (
<input
type="text"
className="form-control"
value={question.answer}
maxLength={question.maxlength}
name={question.slug_question}
onChange={e =>
handleAnswer(question.slug_section, question.slug_question, e.target.value)
}
/>
)}
</div>
}
{question.type == 'rating-range' &&
<div className="form-group">
{[...Array(parseInt(question.range))].map((x, i) => {
return (
<div className="checkbox"
key={i}>
<input
type="radio"
checked={question.answer == i + 1}
name={question.slug_question}
value={i + 1}
onChange={() =>
handleAnswer(question.slug_section, question.slug_question, i + 1)
}
/>
<div className="option">
{i + 1}
</div>
</div>
)
})}
</div>
}
{(question.type == 'simple' || question.type == 'rating-open' || question.type == 'multiple') &&
<div className="form-group">
{question.options.length > 0 &&
<Option
question={question}
handleAnswer={handleAnswer} />
}
</div>
}
</div>
)
}
export default Question;