BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ad multiple choice to response ui

Browse Source
This commit is contained in:
Simon Hirtreiter 2021-02-04 18:55:18 +01:00
parent 7fde9519d4
commit 2001f21065
1 changed files with 139 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
bigbluebutton-html5/imports/ui/components/polling/component.jsx
View File

@ -18,13 +18,24 @@ const intlMessages = defineMessages({
pollAnswerDesc: {
id: 'app.polling.pollAnswerDesc',
},
pollSendLabel: {
id: 'app.polling.pollSendLabel',
},
});
class Polling extends Component {
constructor(props) {
super(props);
this.state = {
checkedAnswers: []
}
this.play = this.play.bind(this);
this.renderButtonAnswers = this.renderButtonAnswers.bind(this);
this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.renderCheckboxAnswers = this.renderCheckboxAnswers.bind(this);
}
componentDidMount() {
@ -38,6 +49,133 @@ class Polling extends Component {
+ '/resources/sounds/Poll.mp3');
}
renderButtonAnswers() {
const {
isMeteorConnected,
intl,
poll,
handleVote,
pollAnswerIds,
} = this.props;
return poll.answers.map((pollAnswer) => {
const formattedMessageIndex = pollAnswer.key.toLowerCase();
let label = pollAnswer.key;
if (pollAnswerIds[formattedMessageIndex]) {
label = intl.formatMessage(pollAnswerIds[formattedMessageIndex]);
}
return (
<div
key={pollAnswer.id}
className={styles.pollButtonWrapper}
>
<Button
disabled={!isMeteorConnected}
className={styles.pollingButton}
color="primary"
size="md"
label={label}
key={pollAnswer.key}
onClick={() => handleVote(poll.pollId, [pollAnswer.id])}
aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
/>
<div
className={styles.hidden}
id={`pollAnswerLabel${pollAnswer.key}`}
>
{intl.formatMessage(intlMessages.pollAnswerLabel, { 0: label })}
</div>
<div
className={styles.hidden}
id={`pollAnswerDesc${pollAnswer.key}`}
>
{intl.formatMessage(intlMessages.pollAnswerDesc, { 0: label })}
</div>
</div>
);
})
}
handleCheckboxChange(pollId, answerId) {
const {checkedAnswers} = this.state
if (checkedAnswers.includes(answerId)) {
checkedAnswers.splice(checkedAnswers.indexOf(answerId), 1)
} else {
checkedAnswers.push(answerId)
}
checkedAnswers.sort();
}
handleSubmit(pollId) {
const {handleVote} = this.props;
const {checkedAnswers} = this.state
handleVote(pollId, checkedAnswers)
}
renderCheckboxAnswers() {
const {
isMeteorConnected,
intl,
poll,
pollAnswerIds,
} = this.props;
return (
<div>
<div>
{poll.answers.map((pollAnswer) => {
const formattedMessageIndex = pollAnswer.key.toLowerCase();
let label = pollAnswer.key;
if (pollAnswerIds[formattedMessageIndex]) {
label = intl.formatMessage(pollAnswerIds[formattedMessageIndex]);
}
return (
<div
key={pollAnswer.id}
>
<input
type="checkbox"
disabled={!isMeteorConnected}
id={`answerInput${pollAnswer.key}`}
onChange={() => this.handleCheckboxChange(poll.pollId, pollAnswer.id)}
aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
/>
<label htmlFor={`answerInput${pollAnswer.key}`}>
{label}
</label>
<div
className={styles.hidden}
id={`pollAnswerLabel${pollAnswer.key}`}
>
{intl.formatMessage(intlMessages.pollAnswerLabel, { 0: label })}
</div>
<div
className={styles.hidden}
id={`pollAnswerDesc${pollAnswer.key}`}
>
{intl.formatMessage(intlMessages.pollAnswerDesc, { 0: label })}
</div>
</div>
);
})}
</div>
<div>
<Button
disabled={!isMeteorConnected}
className={styles.pollingButton}
color="primary"
size="md"
label={intl.formatMessage(intlMessages.pollSendLabel)}
onClick={() => this.handleSubmit(poll.pollId)}
/>
</div>
</div>
)
}
render() {
const {
isMeteorConnected,
@ -69,44 +207,7 @@ class Polling extends Component {
{intl.formatMessage(intlMessages.pollingTitleLabel)}
</div>
<div className={cx(pollAnswerStyles)}>
{poll.answers.map((pollAnswer) => {
const formattedMessageIndex = pollAnswer.key.toLowerCase();
let label = pollAnswer.key;
if (pollAnswerIds[formattedMessageIndex]) {
label = intl.formatMessage(pollAnswerIds[formattedMessageIndex]);
}
return (
<div
key={pollAnswer.id}
className={styles.pollButtonWrapper}
>
<Button
disabled={!isMeteorConnected}
className={styles.pollingButton}
color="primary"
size="md"
label={label}
key={pollAnswer.key}
onClick={() => handleVote(poll.pollId, [pollAnswer.id])}
aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
/>
<div
className={styles.hidden}
id={`pollAnswerLabel${pollAnswer.key}`}
>
{intl.formatMessage(intlMessages.pollAnswerLabel, { 0: label })}
</div>
<div
className={styles.hidden}
id={`pollAnswerDesc${pollAnswer.key}`}
>
{intl.formatMessage(intlMessages.pollAnswerDesc, { 0: label })}
</div>
</div>
);
})}
{poll.isMultipleChoice ? this.renderCheckboxAnswers() : this.renderButtonAnswers()}
</div>
</div>
</div>);