Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
saparagus committed Apr 30, 2024
2 parents 1346bc3 + ef8361c commit 952a0a0
Show file tree
Hide file tree
Showing 11 changed files with 110 additions and 94 deletions.
8 changes: 7 additions & 1 deletion client/assets/custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1313,10 +1313,16 @@ $value in $spacing {

.save-edited-story-box,
.story-topics-box,
.annotations-box {
.annotations-box,
.lesson-topic-box {
width: 350px;
margin-left: 1em;
height: auto;

@media (max-width: 639px) {
margin-left: 0;
margin-bottom: 1em;
}
}

.listening-highlighted-word {
Expand Down
2 changes: 1 addition & 1 deletion client/components/ChatBot/Chatbot.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

@media (max-width: 900px) {
max-height: 35%;
max-width: 60%;
width: 80%;
}
}

Expand Down
15 changes: 8 additions & 7 deletions client/components/ChatBot/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -259,13 +259,14 @@ const Chatbot = () => {
<Spinner animation="border" variant="info" className="spinner-history" />
) : (
<>
{/* hintMessageIdx === 0 means FIRST ATTEMPT */}
{hintMessageIdx == 0 && Object.keys(currentWord).length > 0
&& (spentHints.length > 0 || emptyHintsList) && (
<div className="message message-bot flex space-between"
onMouseDown={handleTooltipClick}>
<ul>
{hintMessage && attempt === 0 && (
<span className="flex Hints ZERO">
<span className="flex debug_Hints debug_ZERO">
<li dangerouslySetInnerHTML={formatGreenFeedbackText(hintMessage)} />
{/*show ONLY ONE (i) if either references or explanation exists*/
(ref || explanation) && (
Expand All @@ -274,7 +275,7 @@ const Chatbot = () => {
</span>
)}
{preHints?.map((hint, index) => (
<span key={index} className="flex PreHints ZERO">
<span key={index} className="flex debug_PreHints debug_ZERO">
<li dangerouslySetInnerHTML={formatGreenFeedbackText(hint)} />
{/*show ONLY ONE (i) if either references or explanation exists*/
(ref && showReferenceIcon(hint)
Expand All @@ -294,20 +295,20 @@ const Chatbot = () => {
{/******************* iterate over messages=BUBBLES *******************/}
{messages.map((message, index) => (
<>
{/******** ??? this must be for MESSAGE-USER ? ********/}
{/******** ??? MESSAGE-USER + MESSAGE-BOT: what other types? ********/}
{/********this is for CHATTING: MESSAGE-USER + MESSAGE-BOT ********/}
{/******** MESSAGE-USER + MESSAGE-BOT: no other types ********/}
<div key={index} className={`message message-${message.type}`}>
{message.text}
</div>
{/******** ??? this must be for MESSAGE-BOT ? ********/}
{/******** HINT: this must be for MESSAGE-BOT ********/}
{(index === hintMessageIdx - 1 && hintMessageIdx > 0)
&& Object.keys(currentWord).length > 0
&& (spentHints.length > 0 || emptyHintsList) && (
<div className="message message-bot flex space-between"
onMouseDown={handleTooltipClick}>
<ul>
{hintMessage && attempt === 0 && (
<span className="flex Hints nonZERO">
<span className="flex debug_Hints debug_nonZERO">
<li dangerouslySetInnerHTML={formatGreenFeedbackText(hintMessage)} />
{/* content to show AFTER message at index hintMessageIdx */}
{(ref || explanation) && (
Expand All @@ -320,7 +321,7 @@ const Chatbot = () => {
)}
{/******** ??? why are prehints here ? ********/}
{preHints?.map((hint, index) => (
<span key={index} className="flex PreHints nonZERO">
<span key={index} className="flex debug_PreHints debug_nonZERO">
<li dangerouslySetInnerHTML={formatGreenFeedbackText(hint)} />
{(ref && showReferenceIcon(hint)
|| explanation && checkHintForExplanation(hint))
Expand Down
74 changes: 39 additions & 35 deletions client/components/Lessons/LessonLibrary/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useDispatch, useSelector } from 'react-redux'
import { useIntl, FormattedMessage } from 'react-intl'
import { List, WindowScroller } from 'react-virtualized'
import React, { useEffect, useState } from 'react'
import { Placeholder, Popup, Icon, Select } from 'semantic-ui-react'
import { Placeholder, Popup, Icon, Select, Container } from 'semantic-ui-react'
import { Segment } from 'semantic-ui-react'

import ScrollArrow from 'Components/ScrollArrow'
Expand Down Expand Up @@ -469,12 +469,15 @@ const LessonList = () => {

const link = '/lesson' + (libraries.group ? `/group/${savedGroupSelection}/practice` : '/practice')
let lessonStartControls = (
<div>
<div style={{
<Container>
<div
className='row justify-center align-center'
style={{
color: '#0088CB', textAlign: 'center',
width: '70%', fontWeight: 500,
fontWeight: 500,
margin: '18px', fontSize: 'large'
}}>
<div class='col col-12'>
<FormattedMessage id="lessons-ready-for-practice" />
{!customizeLessonConfigs && (
<Popup
Expand All @@ -489,41 +492,42 @@ const LessonList = () => {
inverted // Optional for inverted dark style
/>
)}
</div>
</div>
<div style={{ 'display': 'flex' }}>
<LessonPracticeThemeHelp selectedThemes={selectedSemantics ? selectedSemantics : []} always_show={true} />
<LessonPracticeTopicsHelp selectedTopics={selectedTopicIds} always_show={true} />
<div className='row justify-center align-center space-between' style={{ 'display': 'flex' }}>
<div className='col col-md-5 offset-md-1' style={{padding: 0}}>
<LessonPracticeThemeHelp selectedThemes={selectedSemantics ? selectedSemantics : []} always_show={true} />
</div>
<div className='col col-md-5' style={{padding: 0}}>
<LessonPracticeTopicsHelp selectedTopics={selectedTopicIds} always_show={true} />
</div>
</div>
{!teacherView &&
(<Link to={link}>
<div style={{
display: 'flex', alignItems: 'center',
justifyContent: 'space-between', width: '70%', /* was '100%'*/
margin: '18px' /* to match above: id="lessons-ready-for-practice" */
}}>
<Button
size="big"
className="lesson-practice"
disabled={
lessonPending ||
!selectedTopicIds ||
!selectedSemantics ||
selectedTopicIds.length === 0 ||
selectedSemantics.length === 0 ||
noResults
}
style={{
fontSize: '1.3em', fontWeight: 500,
margin: '1em 0', padding: '1rem 0',
width: '100%', border: '2px solid #000',
}}
>
{lessonPending && <Icon name="spinner" loading />}
<FormattedMessage id="start-practice-lesson" />
</Button>
</div>
(<Link
to={link} className='row justify-center align-center'
>
<Button
size="big"
className="lesson-practice"
disabled={
lessonPending ||
!selectedTopicIds ||
!selectedSemantics ||
selectedTopicIds.length === 0 ||
selectedSemantics.length === 0 ||
noResults
}
style={{
fontSize: '1.3em', fontWeight: 500,
margin: '3em 0', padding: '1rem 0',
width: '100%', border: '2px solid #000',
}}
>
{lessonPending && <Icon name="spinner" loading />}
<FormattedMessage id="start-practice-lesson" />
</Button>
</Link>)}
</div>
</Container>
)

const noResults = !metaPending && lesson_topics && lesson_topics.length === 0
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ const LessonPracticeThemeHelp = ({selectedThemes, always_show=false, }) => {
segment_style['height'] = '100%'
}

if (width >= 1024 || always_show) {
if (width >= 900 || always_show) {
return (
<div className="annotations-box">
<div className="lesson-topic-box">
<Segment style={segment_style}>
<div
className="lesson-title"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ import { FormattedMessage, useIntl } from 'react-intl'
import { getTextStyle, learningLanguageSelector, getMode } from 'Utilities/common'
import { getLessonTopics } from 'Utilities/redux/lessonsReducer'

const LessonPracticeTopicsHelp = ({selectedTopics, always_show=true, }) => {
const LessonPracticeTopicsHelp = ({selectedTopics, always_show=false, }) => {
const dispatch = useDispatch()
const { width } = useWindowDimensions()
const learningLanguage = useSelector(learningLanguageSelector)
const { topics: lessonTopics } = useSelector(({ lessons }) => lessons)
const snippets = useSelector(({ snippets }) => snippets)
const topics = lessonTopics && selectedTopics ? lessonTopics.filter(l => selectedTopics.includes(l.topic_id)) : []

const [collapsed, setCollapsed] = useState(!always_show)
const [collapsed, setCollapsed] = useState(true)

useEffect(() => {
dispatch(getLessonTopics())
Expand Down Expand Up @@ -101,7 +101,7 @@ const LessonPracticeTopicsHelp = ({selectedTopics, always_show=true, }) => {

if (width >= 1024 || always_show) {
return (
<div className="annotations-box">
<div className="lesson-topic-box">
<Segment style={segment_style}>
<div
className="lesson-title"
Expand Down
21 changes: 11 additions & 10 deletions client/util/translations/revita/en/LC_MESSAGES/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -702,7 +702,7 @@
"translation-temporarily-unavailable-please-try-again-later": "",
"not-accessible": "",
"no-flashcards-yet-for-this-story-when-you-practice-a-story-and-click-on-unfamiliar-words-they-will-b": "",
"no-flashcards-yet-when-you-practice-a-story-and-click-on-unfamiliar-words-they-will-be-added-to-your": "No flashcards yet.<br/>When you practice with a story and click on unfamiliar words, they will be added to your flashcards!",
"no-flashcards-yet-when-you-practice-a-story-and-click-on-unfamiliar-words-they-will-be-added-to-your": "No flashcards yet for this story.<br/>\nYou can create flashcards in two ways:\n<ul><li>When you practice with a story and click on any unfamiliar word to see its translation, it will be <i>automatically</i> added to your flashcards!</li>\n<li>You can add a flashcard for any words by clicking \"<i>Add new flashcard</i>\" button on the left</li>\n</ul>",
"no-flashcards-found-for-this-exercise-when-you-practice-a-story-and-click-on-unfamiliar-words-they-w": "",
"Previous": "<",
"Next": ">",
Expand Down Expand Up @@ -866,14 +866,14 @@
"participle-exercise": "Choose the base form for participle exercise",
"participle-base-exer": "participle base (easier)",
"verb-base-exer": "verb base (advanced)",
"tour-welcome-message": "Revita helps you learn languages by practicing with stories of your choice.<br/><br/>This tour will show its main features →",
"tour-welcome-message": "Revita helps you learn languages.\n<br/>You can\n<ul>\n<li>Practice with <u><i>any story</i></u> of your choice,</li>\n<li>Focus on particular grammar topics,</li>\n<li>Expand your vocabulary,</li>\n<li>And much more...</li>\n</ul>\n<br/>Click here any time to go to the Home Page.\n<br/><br/>This Tour highlights the <b>main</b> features.\n<br/>Other pages offer you additional Tours to showcase more detail about their features! \n<br/><br/>Let us begin",
"sidebar": "Sidebar",
"tour-sidebar-message": "Here you can open the <b>sidebar</b>. It contains useful settings and functions.",
"tour-learning-language-message": "Here you select the language you are learning. You can change it any time.",
"tour-sidebar-message": "Here you can open the <b>Sidebar</b>. It contains useful settings and functions.",
"tour-learning-language-message": "Here you can select the language you are learning.\n<br/>You can change it any time.",
"add-content": "Add your own content",
"begin-practicing": "End of tour",
"tour-practice-now-message": "Here you can start practicing with a random story.",
"tour-flashcards-message": "When you click on unfamiliar words you find inside stories, Revita automatically creates flashcards for them.<br/><br/>You can practice these words here!",
"tour-flashcards-message": "When you click on unfamiliar words you find inside stories, Revita automatically creates flashcards for them.\n<br/><br/>You can practice with these words here!",
"tour-library-message": "The Library contains stories that you upload, stories from your teacher / class, and sample texts we have pre-loaded for you.",
"tour-add-content-message": "You can upload <b>any</b> stories of your choice, and use them for practising.<br/>→ They will appear in your private library.",
"tour-begin-practicing-message": "Now you can begin practicing!\n<br /><br />Click the Tour icon on other pages—to take a tour of that page.\n<br /><br /> Please register and log in, so Revita can preserve your:\n<ul><li>stories and flashcards,</li>\n<li>settings and preferences,</li>\n<li>skill levels and progress.</li></ul>\n<br /><i>Bon voyage!</i>",
Expand Down Expand Up @@ -970,7 +970,7 @@
"people": "People",
"student": "Student",
"no-students-in-group": "This group doesn't have any students at the moment",
"wordnest-info-text": "The main word in the nest is on the left, words derived from it are below it and indented once to the right, and so on. More common and frequent words have stronger color. Click on the links → to see related nests.",
"wordnest-info-text": "The main word in the nest is on the left, words derived from it are below it and to the right, and so on.\nMore common and frequent words have stronger color.\nClick on the links → to see related nests.",
"no-results-for-time-period": "No results for this time period",
"no-results-for-chosen-time-period": "No results for chosen time period",
"start-test": "Start test",
Expand Down Expand Up @@ -1550,7 +1550,7 @@
"student-view": "Student view",
"click-here-to-see-progress-explanation": "Click here to review your progress",
"click-to-see-TOUR-explanation": "Click here to see the TOUR",
"click-to-change-learning-language-explanation": "Click here to change the language you are learning",
"click-to-change-learning-language-explanation": "Click here to select the language you are learning",
"bell-explanation": "You have {} recommendations waiting",
"self-reflection-submit": "OK",
"reading-test-self-reflection-header": "Please answer a couple of short questions:",
Expand Down Expand Up @@ -1588,7 +1588,7 @@
"Sidebar-user-score-EXPLANATION": "Your current level — click to go to Progress View",
"flashcards-go-to-all-cards-EXPLANATION": "In this story, you saw some words and did not not ask for their translations.\nWe want to assume that you <i>probably</i> know these words.\nWe use these 5 <i>special blue</i> cards to check that you know all of these words.\nIf you answer these 5 cards correctly, you will get credit for all the words you know in this story.\n<br/>\nClick here if you want to go back to working with <i>all</i> your flashcards.",
"flashcards-edit-card-list-EXPLANATION": "Here you can review and modify the <i>complete</i> list of your flashcards",
"flashcards-add-cards-EXPLANATION": "Here you can add flashcards for any new words you like",
"flashcards-add-cards-EXPLANATION": "Here you can add any new words you like to your flashcards",
"flashcards-translate-cards-EXPLANATION": "Exercise with flashcards: translate words into the language you chose",
"flashcards-quick-cards-EXPLANATION": "Click here for quick flashcards: no need to translate — answer only \"I know this word\" or \"I don't know\"",
"progress-results-not-available": "Results not available",
Expand All @@ -1599,11 +1599,12 @@
"practice-listening-cloze-exercises": "Practice <b>Listening</b> — fill-in-the-blank exercises",
"practice-pronunciation-exercises": "Practice <b>Pronunciation</b>",
"enter-question-to-chatbot": "Ask a question from the chatbot ...",
"chatbox-initial-instruction": "Click on an exercise - then you can ask questions here, if it's unclear.",
"chatbox-initial-instruction": "Click on an exercise then you can ask for hints here, if you have questions.",
"click-to-see-translation": "Click to see the translation:",
"summary-people-added-to-group": "People added to group",
"no-available-exercise-OLD": "We have no more exercises for this lesson at the moment. Revita will create more exercises shortly — please come back a bit later!",
"chatbot-response-error": "A connection problem has occurred, please try again in 30 seconds!",
"story-flashcards": "From story:\n<ul><li><i>{story}</i></li></ul>",
"story-blue-cards": "In the story:\n<ul><li><i>{story}</i></li></ul>\nYou saw {nWords} new words and did not ask for their translation! Therefore we assume that you probably know all of these words!\n<br/>\nLet's confirm that you know them,\nby checking only 5 of them, using <i>special blue</i> cards!"
"story-blue-cards": "In the story:\n<ul><li><i>{story}</i></li></ul>\nyou saw {nWords} new words and did not ask for their translation! Therefore we assume that you probably know all of these words!\n<br/>\nLet's confirm that you know them,\nby checking only 5 of them, using <i>special blue</i> cards!",
"word-nest-EXPLANATION": "Click here to see the Word Nest — <i>related</i> words."
}
Loading

0 comments on commit 952a0a0

Please sign in to comment.