into the span
+ while (p.firstChild) {
+ span.appendChild(p.firstChild);
+ }
+
+ p.appendChild(span);
+ });
+
+ return container;
+ }
+
+ wrapSelectionInSpan(selection) {
+ const { classes } = this.props;
+ const range = selection.getRangeAt(0);
+
+ if (range.collapsed) {
+ console.log('Selection is collapsed (no text selected).');
+ return;
+ }
+
+ // Extract the contents of the selection
+ const contents = range.extractContents();
+
+ // Create the span wrapper
+ const span = document.createElement('span');
+ span.className = classNames(classes.token);
+ span.addEventListener('click', this.handleTokenClick);
+ span.appendChild(contents);
+
+ // Insert back into the DOM
+ range.insertNode(span);
+
+ // Collapse the selection
+ selection.removeAllRanges();
+ }
+
+ handleSelection = (event) => {
+ const selection = window.getSelection();
+
+ // prevent unwanted selections
+ if (event.detail > 2) {
+ clearSelection();
+ return;
+ }
+
+ if (selection && selection.rangeCount > 0) {
+ this.wrapSelectionInSpan(selection);
+ clearSelection();
+
+ if (this.textRef) {
+ const content = this.textRef.getHTML();
+
+ this.changeTokenizedText(content);
+ // this.setState({ tokenizedText: content });
+ }
+ }
+ };
+
+ handleTokenClick = (event) => {
+ const { correctMode } = this.state;
+
+ if (!correctMode) {
+ return;
+ }
+
+ event.target.classList.toggle('correct');
+ };
+
+ clearTokens = () => {
+ const { model } = this.props;
+
+ if (this.textRef) {
+ const container = document.createElement('div');
+ container.innerHTML = model.text;
+
+ // Remove all children and add new content
+ this.textRef.innerHTML = '';
+ this.textRef.appendChild(container);
+ }
+
+ this.changeTokenizedText(model.text);
+ this.setState({ tokenizedText: model.text });
+ };
+
+ selectWords = () => {
+ const { text } = this.state;
+ this.clearTokens();
+ const tokenized = this.wrapWordsInSpans(text, (e) => this.handleTokenClick(e));
+
+ console.log('words:', tokenized);
+
+ this.changeTokenizedText(tokenized);
+ this.setState({ tokenizedText: tokenized });
+ };
+
+ selectSentences = () => {
+ const { text } = this.state;
+ this.clearTokens();
+ const container = this.wrapSentencesInSpans(text);
+
+ // Remove all children and add new content
+ this.textRef.innerHTML = '';
+ this.textRef.appendChild(container);
+
+ const tokenized = container.innerHTML;
+ console.log('sentences:', tokenized);
+ this.changeTokenizedText(tokenized);
+ // this.setState({ tokenizedText: tokenized });
+ };
+
+ selectParagraphs = () => {
+ const { text } = this.state;
+ this.clearTokens();
+ const container = this.wrapParagraphContentInSpan(text);
+
+ // Remove all children and add new content
+ this.textRef.innerHTML = '';
+ this.textRef.appendChild(container);
+
+ const tokenized = container.innerHTML;
+ console.log('paragraphs:', tokenized);
+ this.changeTokenizedText(tokenized);
+ // this.setState({ tokenizedText: tokenized });
+ };
+
render() {
- const { text: textValue } = this.state;
+ const { text: textValue, correctMode, selectMode, tokenizedText } = this.state;
const { classes, configuration, imageSupport, model, onConfigurationChanged, onModelChanged, uploadSoundSupport } =
this.props;
const {
@@ -266,68 +589,124 @@ export class Design extends React.Component {
)}
- {text.settings && (
-
Select the sentence from "The Gymnast" that best represents the theme.
', rationale: 'The final sentence of the passage best exemplifies the theme of the short story because Natasha's practice and determination finally pays off.
', + // tokens: [ + // { + // text: 'She thought about what she had to do, struggling to rein in her wild, fearful thoughts.', + // end: 90, + // start: 3, + // correct: false, + // }, + // { + // start: 449, + // end: 585, + // text: 'Just for a hair of a moment, Natasha wondered if she really wanted a perfect 10, so weary was she of trying for but never achieving one.', + // correct: false, + // }, + // { + // end: 627, + // correct: false, + // text: 'At last Natasha\'s moment arrived.', + // start: 594, + // }, + // { + // end: 743, + // text: 'The faces of past giants of gymnastics swam before her mind\'s eye, now razor–sharp with fierce determination.', + // correct: false, + // start: 628, + // }, + // { + // text: 'Suddenly, the din of the gymnasium was silent to her.', + // end: 997, + // correct: false, + // start: 944, + // }, + // { + // end: 1087, + // start: 998, + // correct: false, + // text: 'Forcing all sound out of her mind, she focused on the gleaming balance beam ahead of her.', + // }, + // { + // correct: true, + // start: 1088, + // end: 1225, + // text: 'Taking a deep breath, Natasha made her graceful, yet powerful approach, mounted the beam flawlessly, and...executed her first perfect 10.', + // }, + // ], + // "element": "select-text", + // text: 'She thought about what she had to do, struggling to rein in her wild, fearful thoughts. Coach Cummings always said that an undisciplined mind never scored a perfect 10. Natasha wanted to please her Coach, yet sometimes his approval wasn\'t as exciting as his anger. The gymnasts were unanimous about one thing: Coach Cummings\'s fits of disapproving rage were much more humorous to witness than his infrequent, backslapping moments of high praise. Just for a hair of a moment, Natasha wondered if she really wanted a perfect 10, so weary was she of trying for but never achieving one.
\n\nAt last Natasha\'s moment arrived. The faces of past giants of gymnastics swam before her mind\'s eye, now razor–sharp with fierce determination. "I am talented. I am not afraid. I will make a perfect 10," she spoke aloud to herself, as she approached the mat, dusted her hands with chalk to prevent slippage, and returned to her starting point. Suddenly, the din of the gymnasium was silent to her. Forcing all sound out of her mind, she focused on the gleaming balance beam ahead of her. Taking a deep breath, Natasha made her graceful, yet powerful approach, mounted the beam flawlessly, and...executed her first perfect 10.
\n', tokens: [ - { - text: 'She thought about what she had to do, struggling to rein in her wild, fearful thoughts.', - end: 90, - start: 3, - correct: false, - }, - { - start: 449, - end: 585, - text: 'Just for a hair of a moment, Natasha wondered if she really wanted a perfect 10, so weary was she of trying for but never achieving one.', - correct: false, - }, - { - end: 627, - correct: false, - text: "At last Natasha's moment arrived.", - start: 594, - }, - { - end: 743, - text: "The faces of past giants of gymnastics swam before her mind's eye, now razor–sharp with fierce determination.", - correct: false, - start: 628, - }, - { - text: 'Suddenly, the din of the gymnasium was silent to her.', - end: 997, - correct: false, - start: 944, - }, - { - end: 1087, - start: 998, - correct: false, - text: 'Forcing all sound out of her mind, she focused on the gleaming balance beam ahead of her.', - }, - { - correct: true, - start: 1088, - end: 1225, - text: 'Taking a deep breath, Natasha made her graceful, yet powerful approach, mounted the beam flawlessly, and...executed her first perfect 10.', - }, + // { + // id: '0-30-1751440197593', + // quote: 'She thought about what she had', + // start: 0, + // end: 30, + // }, + // { + // id: '185-206-1751440199435', + // quote: 'o please her Coach, y', + // start: 185, + // end: 206, + // }, + // { + // id: '356-379-1751440202337', + // quote: 'e much more humorous to', + // start: 356, + // end: 379, + // }, + // { + // id: '0-88-1751443110733', + // quote: 'She thought about what she had to do, struggling to rein in her wild, fearful thoughts. ', + // start: 0, + // end: 88, + // }, + // { + // id: '590-607-1751443116013', + // quote: "Át last Ñatasha's", + // start: 590, + // end: 607, + // }, + // { + // id: '624-641-1751443118643', + // quote: 'The faces of past', + // start: 624, + // end: 641, + // }, + // { + // id: '1223-1231-1751443121777', + // quote: 'header 2', + // start: 1223, + // end: 1231, + // }, + // { + // id: '358-376-1751443129379', + // quote: '»»» were much more', + // start: 358, + // end: 376, + // }, + // { + // id: '137-154-1751443132310', + // quote: 'mind never scored', + // start: 137, + // end: 154, + // }, ], - // "element": "select-text", - text: "She thought about what she had to do, struggling to rein in her wild, fearful thoughts. Coach Cummings always said that an undisciplined mind never scored a perfect 10. Natasha wanted to please her Coach, yet sometimes his approval wasn't as exciting as his anger. The gymnasts were unanimous about one thing: Coach Cummings's fits of disapproving rage were much more humorous to witness than his infrequent, backslapping moments of high praise. Just for a hair of a moment, Natasha wondered if she really wanted a perfect 10, so weary was she of trying for but never achieving one.
\n\nAt last Natasha's moment arrived. The faces of past giants of gymnastics swam before her mind's eye, now razor–sharp with fierce determination. \"I am talented. I am not afraid. I will make a perfect 10,\" she spoke aloud to herself, as she approached the mat, dusted her hands with chalk to prevent slippage, and returned to her starting point. Suddenly, the din of the gymnasium was silent to her. Forcing all sound out of her mind, she focused on the gleaming balance beam ahead of her. Taking a deep breath, Natasha made her graceful, yet powerful approach, mounted the beam flawlessly, and...executed her first perfect 10.
\n", + text: 'She thought about what she had to do, struggling to rein in her wild, fearful thoughts. Coach Cummings always said that an undisciplined mind never scored a perfect 10. Natasha €€€ wanted to please her Coach, yet sometimes his approval wasn't as exciting as his anger. The gymnasts were unanimous about one thing: Coach Cummings's fits of disapproving rage »»» were much more humorous to witness than his infrequent, backslapping moments of high praise. Just for a hair of a moment, Natasha wondered if she really wanted a perfect 10, so weary was she of trying for but never achieving one
Át last Ñatasha's moment arrived. The faces of past giants of gymnastics swam before her mind's eye, now razor–sharp with fierce determination. "I am talented. I am not afraid. I will make a perfect 10," she spoke aloud to herself, as she approached the mat, dusted her hands with chalk to prevent slippage, and returned to her starting point. Suddenly, the din of the gymnasium was silent to her. Forcing all sound out of her mind, she focused on the gleaming balance beam ahead of her. Taking a deep breath, Natasha made her graceful, yet powerful approach, mounted the beam flawlessly, and...executed her first perfect 10.
header 1 | header 2 |
row | row |