Need help with a bit of code for language learning website

nklanguageschool · August 28, 2020, 6:09pm

I run a language learning website and I want to customise a page. On the page, people will translate sentences from English to Spanish (or French, etc), and write the answers in a text box next to the question.

There is a link next to the text box which says ‘Check answer’. I want people to be able to click this and then it make the answer appear below the text box. I think this should just be a bit of simple code. What is this effect called, and what is the easiest way to do it? Can I just paste some html in? I don’t know much about Corvid, and Wix customer support told me there is no option to add this effect in on Wix yet, so it has to be done by code.

I’ve included a screenshot of the page.

Thanks

CODE-NINJA · August 28, 2020, 6:23pm

I think this should just be a bit of simple code.
Okeeeeeeeeeeeeey! Here we go!

$w.onReady(function() {
   $w("#myButtonX").onClick(()=>{
  
      if ( ...here your if-statement... ) {...when if = ok...}
      else { ... here when if-statement not ok ....  } 
  });  
});

You will surely have all your data in a DATABASE…
That means you have to get the VALUE from the DropDown and compare it with the related value given in your DATABASE.

When this process is done, you can make the following…
—> When wrong-answer —> let turning DropDown-Inputfield into -->RED
—> When right-answer —> let turning DropDown-Inputfield into -->GREEN

-How to get data from DATABASE (usind DATASET)?

-How to get data from DATABASE (usind DATA_COLLECTION)?

Good luck! —> Just a little bit of code!

nklanguageschool · August 28, 2020, 6:54pm

Hi, thanks for your reply! So do I just copy and paste the code above into my website? Is this HTML code, or do I have to go into Development Mode? I am new to code, so can anyone walk me through how to add this to my Wix site, Thanks.

CODE-NINJA · August 28, 2020, 7:14pm

Here in CORVID you will work obviously with JavaScript (JS).
Also a little bit of HTML, but the most actions you will do all with JS!

I just wanted you to show, that this will NOT be just a litte…

"OK! i will do it in 5minutes project!

Especialy when you are a BEGINNER!

Do you have already a database ?
Has this database already some value, to work with ?
Do you have already a form (YES already created by you)
Name of your DATACOLLECTION ?
Pic of the complete header of your DATABASE including the first row of data.
Do you use DATASETs ? (You know what datasets are?)

Still thinking of an easy & quick programming-way ?

nklanguageschool · August 28, 2020, 7:28pm

Not yet, but I presume I add one the page via Add > Content Manager > Database Collections > New Collection etc.
Not yet
Not yet
N/A yet
I’ll send once set up
I have no idea what a DATASET is, but it can be added to my site via Add > Content Manager > Content Connections > Dataset etc.

As you can see, I’m a bit out of my depth with coding so bear with me.

nklanguageschool · August 28, 2020, 7:33pm

Actually, does this need to be done in Development Mode? I noticed that’s for Corvid coding on Wix.

CODE-NINJA · August 28, 2020, 7:36pm

You can do it just in DEVELOPER-MODE!
If you deactivate it —> No possibilities to enter CODE.

CODE-NINJA · August 28, 2020, 7:38pm

Not yet, but I presume I add one the page via Add > Content Manager > Database Collections > New Collection etc.

Not yet

N/A yet

I’ll send once set up

I have no idea what a DATASET is, but it can be added to my site via Add > Content Manager > Content Connections > Dataset etc.

As you can see, I’m a bit out of my depth with coding so bear with me.

Well as you can see, you are absolutely NOT prepared to start coding.

When you have done all the points, then you come back, for a second try.

nklanguageschool · August 28, 2020, 8:08pm

Ok so I just added a new database collection without Dev Mode, by going to Add > Content Manager > Database Collections > New Collection etc. I have named it ‘Language Writing Practice’. Please see the 2 attached screenshots. What do I need to do next?

nklanguageschool · August 28, 2020, 8:08pm

CODE-NINJA · August 28, 2020, 8:25pm

Creating your DATABASE → Filling it up with your data.
You will surely have QUESTIONS & ANSWERS, right?

For example…

COLUMN-1 —> QUESTIONS
COLUMN2 —> ANSWERS

But you will have different languages, so you will need different ANSWERS

COLUMN2 → ENGLISH-ANSWER
COLUMN3 —> GERMAN-ANSWER
COLUMN4—> RUSSIAN-ANSWER
COLUMN-5 —> FRENCH-ANSWER
.
.
.and so on …

I do not really know how you want to structure your DATABASE.

I would suggest you to start in simple mode.

First just with 1-Question and 2-different ANSWER-OPTIONS in 2 different languages

3x-COLUMNS

Column-1 | Column-2 | Column-3 <----something like this

First bring a “simple” example to work.
Damn! Here we have it again ----> “SIMPLE”

Then you can EXPAND your database and it’s funcionalities, as you like.
(If you will be able to)

In some cases, perhaps you event do not need any code and can do it in EDITOR, but i have make the experience, that in most cases, you will reach an END-POINT, where you simply won’t be able to continue just using EDITOR.-options and you will come-back to CORVID .

So just don’t try it to do something without CORVID, start right from the beginning using code (it gives you much more flexibility) → but is also more difficult to handle!

nklanguageschool · August 28, 2020, 11:15pm

Hi, ok so I thought about it and I think it’d be easier to work on 1 language at a time. So I set up a new database collection for Spanish, as you can see in the attached screenshot. I’ve put the question in English in column 1, then the answer in Spanish in column 2. What next?

CODE-NINJA · August 28, 2020, 11:21pm

Do you have already a database ? —> ( done )
Has this database already some value, to work with ? —> ( done )
Do you have already a form (YES already created by you) —> ( done )
Name of your DATACOLLECTION ? —> ( done )
Pic of the complete header of your database including the first row of data ( done )
Do you use DATASETs ? (You know what datasets are?) <<<---- ???

See you tomorrow.

nklanguageschool · August 29, 2020, 12:11am

As for datasets, I looked up some info about them and found this, so I think I get the idea of what they are:

A Dataset connects your page’s elements to your content collection. Datasets allow you to pull content from your collection to display on your site, or use input elements to add content from your site to your content collection.

So presumably I have to set up a dataset next. So what is the next step? They look complicated to set up!

CODE-NINJA · August 29, 2020, 8:27am

I already gave you the next step…

-How to get data from DATABASE (usind DATASET)?

https://www.wix.com/corvid/reference/wix-dataset/dataset/getitems
Open this link and start studying this article.

Get items from the dataset when the page loads

CODE EXAMPLE: With this you can get data out of your DATABASE (using DATASET)

$w.onReady( () => {
 $w("#myDataset").onReady( () => {
 $w("#myDataset").getItems(3, 2)
 .then( (result) => {
 let items = result.items;
 let totalCount = result.totalCount;
 let offset = result.offset;
 } )
 .catch( (err) => {
 let errMsg = err.message;
 let errCode = err.code;
 });
 });
});

You have of course to modify it to your own needs.
Like here in this line…

$w("#myDataset").getItems(3, 2)

You have to set a filter, wich will filter the data of your DB and searching this way for the right value in DB.

The right value will be the value of one of the input-fields belonging to each of the buttons.

Now! ----> take a paper (turn on your brain) and start some BRAINSTORMING.
With the question —> How will be the flow of my project?

What i have to connect with each other?
What should happen when button is pressed?
How to get the value of the inputfield?
How to put the gotten value into DB ?
and so on …

Just a simple code!

nklanguageschool · August 29, 2020, 12:51pm

Thanks for the reply. This is all really complicated for me haha! In the code example you wrote, is it possible to give me an example for how I would write it for one of my questions? Once I see your example, I will know which fields to modify and it shouldn’t be too difficult after that.

In the example, let’s try the verb ‘To speak’, which is ‘Hablar’ in Spanish. So I would need to know what code to write to make ‘Hablar’ appear when I click on ‘Check answer’. Once I see it with one example, I can simply repeat it for all other questions on my page as I will know which parts of the code to edit.

Thanks.

CODE-NINJA · August 29, 2020, 3:10pm

Did you do some BRAINSTORMING already?
I will wait for some code from you, which will show me a try of your own to solve this problem.
I am not here to give everybody a Ready2Go-Solution! You can get it here, if you wish it…
https://www.wix.com/corvid/forum/community-discussion/need-a-little-help-with-your-site-hire-a-corvid-web-developer

When you have some first code, which you are able to present it here (in CODE-TAGS!), i will take a look onto it and correct it, or help you to bringt it to work.

Don’t forget —> Just a simple code!

Topic		Replies	Views
Users to Sort Database Collection. Ask the community code , question	2	198	September 14, 2017
Using the Wix Data Query [SOLVED] Ask the community code , question	1	246	June 12, 2018
Need help with Wix Query for quiz Ask the community code , question	3	120	April 26, 2021
DataBase Query Ask the community code , question	6	192	November 15, 2019
Please help me in drop down list to connect each other Ask the community code , wix-forms , question	4	106	March 17, 2023

Need help with a bit of code for language learning website

Related topics