The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Dynamically add questions data to html page, creating a survey application that dynamically forms the HTML page
uahmed90
post Mar 26 2018, 03:23 PM
Post #1





Group: Members
Posts: 5
Joined: 26-March 18
Member No.: 26,614



Hi,

I'm working on a college project. I need to create a Survey application, and the part that I am stuck on is how to bring data into my html form from a database, dynamically?
Basically, there are questions, and the answers, which the user will choose and both the questions and answers will be submitted into a database. That much I can do, but I cannot figure out how to bring the question itself from the database, and make it appear in the HTML page. For example:

Question: <input type="text" id="ques">, this will give me the form field to input the answer to the question and program the submit button to send both question and answer to the database, but how do I RETRIEVE the QUESTION itself, from the database? the Question: <input type="text" id="ques">, this is what I want to bring in from the database.

Also, I am using a firebase database, so if possible, please answer in reference to that, if not thats no problem. I can figure that part out if I can understand how to do that in html.

THanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 26 2018, 03:39 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,917
Joined: 10-August 06
Member No.: 7



QUOTE(uahmed90 @ Mar 26 2018, 10:23 PM) *

I cannot figure out how to bring the question itself from the database, and make it appear in the HTML page.

You mean you want to print all questions at once, when the page is first loaded? Then you might let a server-side script (e.g. PHP) query the database table's column of questions, and then let the server-side script generate the HTML.



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
uahmed90
post Mar 26 2018, 07:54 PM
Post #3





Group: Members
Posts: 5
Joined: 26-March 18
Member No.: 26,614



QUOTE(Christian J @ Mar 26 2018, 03:39 PM) *

QUOTE(uahmed90 @ Mar 26 2018, 10:23 PM) *

I cannot figure out how to bring the question itself from the database, and make it appear in the HTML page.

You mean you want to print all questions at once, when the page is first loaded? Then you might let a server-side script (e.g. PHP) query the database table's column of questions, and then let the server-side script generate the HTML.

oh ok.could you just mention what objects or classes to use on the HTML side?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 27 2018, 06:25 AM
Post #4


.
********

Group: WDG Moderators
Posts: 7,917
Joined: 10-August 06
Member No.: 7



QUOTE(uahmed90 @ Mar 27 2018, 02:54 AM) *

oh ok.could you just mention what objects or classes to use on the HTML side?

HTML doesn't use those, it's just a static markup language. PHP (and javascript) might use them, but that's optional.

I now nothing about connecting to a firebase database with PHP, but a web search should turn up something.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 27 2018, 02:39 PM
Post #5


Programming Fanatic
********

Group: Members
Posts: 1,544
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(uahmed90 @ Mar 26 2018, 03:23 PM) *
Basically, there are questions, and the answers, which the user will choose and both the questions and answers will be submitted into a database. That much I can do, but I cannot figure out how to bring the question itself from the database, and make it appear in the HTML page. For example:
This statement makes me think you are using a server side language. What language is it, PHP ASP or ??? If you're putting data into a database then you must already know how to connect to the database, etc.

Your question is too broad unless you show us your code. How is your database setup? I think it would involve 2 tables, 1 table for questions and 1 table for answers. Each question needs to be tied to the possible answers (I assume you also have incorrect answers for each question). You don't want to store the correct answer in the web page because then you just need to 'View Source' to see the correct answer. This means that each question will have to make an AJAX call to retrieve the correct answer. I could go on but you get the idea.

Put some code together and post it here (or attach it to a post) with a specific question.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 28 2018, 08:03 AM
Post #6


.
********

Group: WDG Moderators
Posts: 7,917
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Mar 27 2018, 09:39 PM) *

I think it would involve 2 tables, 1 table for questions and 1 table for answers.

Wouldn't one table suffice for that? Each question's row might contain one column each for the question and the answer alternatives. But maybe the chosen answer should be stored in a separate table, with one row for each participating user.

QUOTE
Each question needs to be tied to the possible answers (I assume you also have incorrect answers for each question). You don't want to store the correct answer in the web page because then you just need to 'View Source' to see the correct answer.

Note that it's a survey, not a user test, so I guess the answers must be shown for the user to see.

QUOTE
This means that each question will have to make an AJAX call to retrieve the correct answer.

That sounds like overkill to me, unless it's important to process each separate question one at the time (like in branching questions trees?). Otherwise the whole form could be submitted as a whole without Ajax.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 28 2018, 10:19 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 1,544
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ Mar 28 2018, 08:03 AM) *
Wouldn't one table suffice for that? Each question's row might contain one column each for the question and the answer alternatives. But maybe the chosen answer should be stored in a separate table, with one row for each participating user.
Yes, one table could work. My mind always thinks of a header / detail setup first. Because the details file can be setup with a foreign key to allow cascade 'delete' (I mean, if you delete a question you don't need the answers). If I use 1 table then I have to write that code.

QUOTE(Christian J @ Mar 28 2018, 08:03 AM) *
Note that it's a survey, not a user test, so I guess the answers must be shown for the user to see.
True, so I guess there's no correct answer.

QUOTE(Christian J @ Mar 28 2018, 08:03 AM) *
That sounds like overkill to me, unless it's important to process each separate question one at the time (like in branching questions trees?). Otherwise the whole form could be submitted as a whole without Ajax.
Yes, I was thinking of displaying the correct answer as you go but you could just submit the form since there's no correct answer.

I would start a project like this by first designing the user interface, then the database layout, then write the code. Of course, as I write code I may need to adjust the database layout for things I didn't think of.

This post has been edited by CharlesEF: Mar 28 2018, 11:11 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 28 2018, 04:42 PM
Post #8


.
********

Group: WDG Moderators
Posts: 7,917
Joined: 10-August 06
Member No.: 7



BTW, do the questions really need to be in the database in the first place? It might be simpler to just create a static HTML page with a survey form.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
uahmed90
post Mar 28 2018, 04:42 PM
Post #9





Group: Members
Posts: 5
Joined: 26-March 18
Member No.: 26,614



QUOTE(CharlesEF @ Mar 27 2018, 02:39 PM) *

QUOTE(uahmed90 @ Mar 26 2018, 03:23 PM) *
Basically, there are questions, and the answers, which the user will choose and both the questions and answers will be submitted into a database. That much I can do, but I cannot figure out how to bring the question itself from the database, and make it appear in the HTML page. For example:
This statement makes me think you are using a server side language. What language is it, PHP ASP or ??? If you're putting data into a database then you must already know how to connect to the database, etc.

Your question is too broad unless you show us your code. How is your database setup? I think it would involve 2 tables, 1 table for questions and 1 table for answers. Each question needs to be tied to the possible answers (I assume you also have incorrect answers for each question). You don't want to store the correct answer in the web page because then you just need to 'View Source' to see the correct answer. This means that each question will have to make an AJAX call to retrieve the correct answer. I could go on but you get the idea.

Put some code together and post it here (or attach it to a post) with a specific question.

Hi,
Thanks for the response. I've attached the html file of what I want the form to look like.

As for what I'm using, I'm using FIREBASE as my server. I can host it on firebase, and use Firebase code to communicate between the server. Firebase also has its own database, which is a JSON structure db.
Basically, when the user opens the web page, the webpage should dynamically create the page, pulling the latest data from the database and then display it. I just need some direction as to how I can do that.
My database is setup as a JSON tree, I've attached a file for that as well. I just need some direction, i've hit a wall.

Thank you all for your responses.


Attached File(s)
Attached File  survey.zip ( 6.63k ) Number of downloads: 113
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
uahmed90
post Mar 28 2018, 04:43 PM
Post #10





Group: Members
Posts: 5
Joined: 26-March 18
Member No.: 26,614



QUOTE(Christian J @ Mar 28 2018, 04:42 PM) *

BTW, do the questions really need to be in the database in the first place? It might be simpler to just create a static HTML page with a survey form.

The reason the questions need to be in a db is because they may change over time, and I need to create a backend for the customer to be able to edit the questions when they like. So I can't go the static route.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
uahmed90
post Mar 28 2018, 04:47 PM
Post #11





Group: Members
Posts: 5
Joined: 26-March 18
Member No.: 26,614



QUOTE(Christian J @ Mar 28 2018, 08:03 AM) *

QUOTE(CharlesEF @ Mar 27 2018, 09:39 PM) *

I think it would involve 2 tables, 1 table for questions and 1 table for answers.

Wouldn't one table suffice for that? Each question's row might contain one column each for the question and the answer alternatives. But maybe the chosen answer should be stored in a separate table, with one row for each participating user.

QUOTE
Each question needs to be tied to the possible answers (I assume you also have incorrect answers for each question). You don't want to store the correct answer in the web page because then you just need to 'View Source' to see the correct answer.

Note that it's a survey, not a user test, so I guess the answers must be shown for the user to see.

QUOTE
This means that each question will have to make an AJAX call to retrieve the correct answer.

That sounds like overkill to me, unless it's important to process each separate question one at the time (like in branching questions trees?). Otherwise the whole form could be submitted as a whole without Ajax.

Well, the answers should only be submitted once the user has completed the survey and clicks Submit. So i don't think that should be overkill. Basically, onCreate, I need the webpage to load the questions on the page at that time, i don't want to enter the questions statically, its important that they are freshly pulled from the database each time the user starts a survey because the questions will change over time, maybe some new questions will be added.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 28 2018, 09:03 PM
Post #12


Programming Fanatic
********

Group: Members
Posts: 1,544
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Based on your zip file I don't see anything that looks like server side code. Are you using any server side scripts? I mean, when you click a submit button the data is sent to the server for processing. What server side language are you using? I know nothing about Firebase, I don't use it, never been exposed to any Firebase code.

It appears to me you want to dynamically add the questions/answers using javascript. Is that correct?

The JSON you included only has the questions. Where are the possible answers? Are they the responses you show in your web page?

Why so many <form>s on the page? Are they really needed?

Show me the code you use to connect to the database.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 30 2018, 09:42 PM
Post #13


Programming Fanatic
********

Group: Members
Posts: 1,544
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I looked over your files. The JSON file is missing entries and it even has 1 or 2 duplicates. Your HTML file has so many errors I don't think it would submit correctly. Example: The select element doesn't have an action attribute, but you use it. Not 1 of the radio buttons have a value attribute. When a page is submitted name/value pairs are sent to the server. With no value attribute then the value is never sent to the server?

Based on the JSON file there is no way to dynamically create the form. The best you can do is hard code 99% of the form then use javascript to insert the questions only.

This post has been edited by CharlesEF: Mar 30 2018, 09:43 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th October 2018 - 09:25 PM