I think, that avoid errors with some screen syzes could be also overcomed by reconstructing GUI logic.
For example. Instead of making 40 input boxes with A values, it would be possible to create combobox wihch would contain every question to answer. So I Am understanding The programmers reality well, even HTMLwidgets can be used by totally blind programmer without issues of screen syzes, if programmer will choose The right programmers approach when creating GUi by using HTMlwidgets.
The similar could be right for Table. If I will not create too long tables with too long lines, it could be also a good approarch.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201010/4cd550d0/attachment.htm>

An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201010/69870843/attachment.htm>

Oh yes. You have got interesting idea.
Mr SUZINEAU you always making Me very big joy.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201010/9eefe62c/attachment.htm>

And I have got other idea. What about adding only three questions with editable label. Only if user will answer all three questions app will add only next three new questions. Previous question should not be shown. But I must determine if I will be able to modify The source which you have created by using this approach.
Sure. possibilityes are various. If i would been more smart, I could even create a nice table with good answers only after aevery good answer will be answered. I will have to wait, till somebody will create some example with HTMLwidgets unit which uses table.
I Am very nicely surpriced, that resulting javascript code is so fast. And sysutils and other Pascal run-times are also consuming some CPU cycles and RAM. But somebody here is so advanced, that he have created really robust and reliable platform to develop fast and reliable WEB apps. Very well done.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201010/5b6db5f1/attachment.htm>

I added a TTagWidget. It has an enumerated which indicates the tag you want to have. It has a 'TetxtContent' which will set the innertext of the tag. Using this you should be able to create any tag you want, including tables, rows, cells etc.

I added it to the widget demo, together with a more complete Audio/Video html widget.

I updated the online demo at
https://www.freepascal.org/~michael/pas2js-demos/widgets/

I'm working on a table widget demo, that should follow tomorrow.

Michael.

Dear MR Van Canneyt,
Thank you very much for yours briliant programmers work. You are not only working on yours commercial applications, but you are even bringing high quality units and programming examples to The opensource community and you are helping me to create GUI which is fully accessible and even acceptable for sighted majority. Thank you for yours programmers efford and for yours good will to help others around you.

A little later than I would have wanted to, but anyway: I added 2 table widget demos. The first demo uses a TEventTableWidget: all data for the table cells is retrieved using an event. You just define the columns, set the number of rows you want, and in the event you return the data for a particular cell.

The demo illustrates how you could use this to populate a table with 10 questions and 10 input boxes for the answers: it takes less than 10 lines of code.

The second demo illustrates a TSTringsTableWidget. It more or less mimics the TStringGrid found in the LCL/VCL: you can set columns/rows and fill the table cells with strings.
I've applied some bootstrap styles to it, so it looks 'nice' for sighted people, but you should be able to examine the table as well with your screen reader. (I hope)

The online demo at
https://www.freepascal.org/~michael/pas2js-demos/widgets/ has been updated so it contains the 2 demos.

a TDBTableWidget and TDBSelectWidget demo will also still be added. As the name suggests, they show the contents of a dataset.

Note that these widgets are read-only at the moment, because this is how I use them in my company. We never allow editing in a grid/table. The components currently still reflect this, but I am open for suggestions on how to make them editable. I have planned many other refinements, but these components are currently used as-is in production websites.

Michael.

Very very wll done. I will just update Pas2js trunk to get all demos. I like yours short code with 10 questions. I wwill show The table by my kind mother. It is ideal, that i have so soft woman by my side, in other cases, I would think, that something looks oK thanks to screen readers feetback. But screen readers communicate by using WEB browser object model so it is not possible to always know, if all data can fit on The screen. So it is necessary to consult with sighted people The GUI after program creation. Thank you very much for yours time and for yours fast and professional work.

And source code of those new dome is very probably located in demohtmlwidgets.pp
Thank you for yours demos. I will recode it to contain my Czech questions. And I will do my best to incorporate condition block for right answers by using The code from MR Suziau.
Very well done and thank you again.

I Am now doing my best to inject The code TEventTableWidgetDemo on a empty new project. Which will be able to run separately so I will be able to add my Cech question and I will be able to test The answers and everything will be as A table.
I Am sending you my first attempt, code can not be compiled. I would like to know if I Am going by right direction, or if I can not do that by using this approach.
My goal is to be able to simply use this code from project.html page without additional HTML code which resides inside original project html file. Thank all of you for yours patience with understanding Pascal code semantic. -------------- next part --------------
A non-text attachment was scrubbed...
Name: project1.lpr
Type: application/octet-stream
Size: 843 bytes
Desc: not available
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201011/847ab185/attachment.obj>

Your approach is OK. You simply had a typing error in your code. I completed the code somewhat, so you can see how to proceed, and I attached your reworked project.

Michael.
-------------- next part --------------
program project1;

{$mode objfpc}
uses
sysutils, web, js, webwidget, htmlwidgets, browserapp;
type
  TMyApplication = class(TBrowserApplication)
  private
    FInputs : Array[0..9] of TTextInputWidget;
    FTable : TEventTableWidget;
    FWebPage: TWebPage;
    procedure DoGetCellData(Sender: TObject; Enum: TTableRowEnumerator; aCell: TTableWidgetCellData);
  Public
    procedure doRun; override;
  end;
procedure TMyApplication.DoGetCellData(Sender: TObject; Enum: TTableRowEnumerator; aCell: TTableWidgetCellData);
begin
  if aCell.Kind=rkBody then
    case aCell.Col of
      0 : aCell.Text:='Question '+IntToStr(aCell.Row+1);
      1 :
        begin
        Finputs[aCell.Row]:=TTextInputWidget.Create(Self);
        aCell.Widget:=Finputs[aCell.Row];
        end;
    end;
end;
procedure TMyApplication.doRun;
begin
  FWebPage:=TWebPage.Create(Self);
  FTable:=TEventTableWidget.Create(Self);
  ;
  FTable.CustomColumns.Add('Question');
  FTable.CustomColumns.Add('Answer');
  FTable.Parent:=FWebPage;
  FTable.RowCount:=Length(FInputs);
  Terminate;
end;
var
  Application : TMyApplication;
begin
  Application:=TMyApplication.Create(nil);
  Application.Initialize;
  Application.Run;
end.

I will go by using simpler way. I will directly modify yours project and I will try to experiment with The table related code from this project. Thank you for all table related GUi creation routines.
If I understand it well, stringtable is based on bootstrap which produces nice tables and should be visible even on various screen syzes. The part of The code which create country table with more than 200 table items.

The string table can be used perfectly without bootstrap.

If you comment out the line 209 in unit demohtmlwidgets:

STW.Classes:='table table-bordered table-striped table-hover table-sm';

Then the table will simply not use bootstrap classes.

Bootstrap uses only some CSS classes, so it is completely optional.

Michael.

Oh, wonderful work. Since my semantic Pascal language knowledge is not good, it will be The best to learn GUi related tasks from yours project directly. Very well done and thank you.