The original App-Writer tried to do everything for you. That has good points and bad points. However, when I swapped over to a newer coding architecture for my own apps, I realised that the old App-Writer approach was unnecessary. Instead, App-Writer 2 provides a few core examples containing most of the elements you will need, so you can copy paste to get your own apps running far more easily than having to use an app-generation method.
All apps need sliders, radio buttons, check boxes, buttons and text boxes as inputs. Apps also need outputs in text boxes, textareas, graphs and graphics.
So here's what you do so that you have all these things ready to use. First, download the zipped up infrastructure a-w-2.zip. Unzip it to a convenient folder (it adds sub-folders containing all the relevant files). You find Demo.html, the more complex DemoY2.html, and the file handling version DemoFile.html (which also has a textarea output). Just double click on any of them and you're running the app.
If you want to see the demo apps online then you'll find the first at Demo.html and can find more sophisticated ones linked from there.
Now open Demo.html in a convenient coding editor. For most of us this means Visual Studio Code, which is free and amazingly powerful. It will recognise that the file is HTML so everything will be nicely colour formatted for you.
The HTML bit
There's a whole bunch of boilerplate stuff that you can look at later. That sets up everything so you have a nice-looking webpage and sliders, graphics etc. that all just work with no effort on your part.
Just scroll down to Quick Start and Credits. You can type in anything you want here to get stuff off to a quick start and give credit where credit's due.
The real stuff starts at
The first thing you encounter sets up a graph that covers the whole width of your screen
Now we start to set up our controls. We want a row of sliders and we want the first one to be linear:
channel for more Practical Science videos