Help> make an HTML page to solve engineering examples

  • Context: HTML/CSS 
  • Thread starter Thread starter Eng.Naif
  • Start date Start date
  • Tags Tags
    Engineering Html
Click For Summary

Discussion Overview

The discussion revolves around creating an HTML page designed to solve engineering examples, incorporating user inputs, equations, and tables. Participants explore various technical approaches, including the use of JavaScript and potential backend solutions.

Discussion Character

  • Technical explanation
  • Exploratory
  • Homework-related

Main Points Raised

  • One participant seeks assistance in developing an HTML page that can dynamically solve engineering problems based on user inputs.
  • Another participant questions whether the goal is to create a static cheat sheet or a dynamic calculator, suggesting that a static page would not require JavaScript.
  • A participant clarifies that the page is intended to solve examples from a book, with varying inputs such as diameter and bending moment.
  • Suggestions are made to use JavaScript and jQuery for the web page, with references to libraries like jsxgraph for charting.
  • There are recommendations for using a backend web server with languages like Groovy or PHP if JavaScript cannot handle the complexity.
  • Participants discuss the implementation of user input fields in JavaScript, with examples provided for validating user input.
  • Clarifications are made regarding the use of variable names in JavaScript and how to access HTML elements through their IDs.

Areas of Agreement / Disagreement

Participants express various approaches to the problem, with no consensus reached on a single method or solution. There are differing opinions on whether to use JavaScript alone or to incorporate a backend server.

Contextual Notes

Some participants highlight the need for cross-browser compatibility and the potential complexity of the project, which may influence the choice of technologies used.

Eng.Naif
Messages
8
Reaction score
0
Hello everybody;

I need your help in making an HTML page used to solve engineering examples with equations and many tables will be used (maybe I should use Java Scripts).. the inputs will differ due to the user.

Please help me ,,
 
Last edited by a moderator:
Technology news on Phys.org
can you explain this better. Are you trying to make a cheat sheet where all the key formulas of a given course are listed on one page?

if its a static page then you don't need javascript.

or are you trying to make a calculator to solve any kind of engineering problem then I suggest you just use MATLAB.
 
Hello, jedishrfu
thanks for your replyNo it's not for cheating, it's an assignment >>>

its not static page at all,,, this page is used to solve the examples in a book but the inputs are differ ,, there is an example in the attachments;

for this example the diameter of the shaft may differs or the bending moment ..etc
also this example uses a table to get information due to the data given...If I use MATLAB its difficult to put it in an HTML page...//
I hope you Understand me ,,,

Mod note: Just because you have learned some HTML, it's not necessarily a good idea to use it all in one post. [/color]
 

Attachments

  • Untitled.png
    Untitled.png
    38.4 KB · Views: 433
  • Untitled2.png
    Untitled2.png
    25.4 KB · Views: 494
Last edited by a moderator:
okay I understand.

There's two ways to proceed using javascript with your web page or using a web server that does the calculations and returns a web page.

I think the javascript should be sufficient. You'll need to check out jquery + javascript. jquery will help you write javascript that will work across many different browser types.

Next for charting you'll need something like jsxgraphcore.js

http://jsxgraph.uni-bayreuth.de/wp/

If you plan to use a backend web server consider using grails. it comes with a built-in server and uses groovy as the base language. groovy is a scripting superset of java. Groovy scripts can run java code pretty much unchanged (there are some keyword issues and other syntax oddities).

Now how should you start:

1) checkout jsxgraph examples and see if you can use it to do what you want.
2) learn some java script and jquery if jsxgraph isn't enough
3) lastly for more comprehensive modeling and heavy math consider using the webserver. (this may be overkill for your project but wanted to let you know there's another path)

EDIT: I forgot to mention that you could also use PHP web server solution if the javascript can't handle the complexity.
 
Last edited:
Thank you very much jedishrfu ...

Actually I'm not an expert in programing, but let me try these programs you mentioned..
 
The jsxgraph stuff and javascript should keep you busy for some time and if you get good at it you can throw in a CSS to make the web page look like an Android app display (I'm just learning about this myself from the book Android Apps by Jonathan Stark from Orielly Press).
 
<b> Please can anyone help me with JavaScript that I want to put a variable that the user will enters, for example :</b>

<i> enter the length [here the user will enters a number]</i>
 
Last edited:
Eng.Naif said:
<b> Please can anyone help me with JavaScript that I want to put a variable that the user will enters, for example :</b>

<i> enter the length [here the user will enters a number]</i>

In the simplest case, you just use an HTML <input> tag to accept the user's input, and a <button> to trigger a javscript function that processes that input. An example is as follows:

Code: 
<script>
  function ok(){
    var elm1 = document.getElementById("1");
    var numericExpression = /^[0-9,\.]+$/;
    if(!(elm1.value.match(numericExpression))){
      alert("Enter a positive number for Length");
    }else{
      //do stuff with valid value
    };
  };
</script>
<html>
  <body>
     Enter Length: <input type="text" name="Length" id="1" value="10"><br>
    <button type="button" onclick="ok()" >OK</button>
  </body>
</html>
 
  • #11
Yes I got it ,,
thank you jedishrfu ..,,,
But I going to use many inputs and I will use these inputs again in an equation to calculate ___________________
in your example did you define the input as elm1 ?
 
  • #12
in gabbagabbahey's example the var elm1 is the input notice the var stmt queries the document for id #1 which in the html the input field.

You should really checkout the jquery as it is the preferred way of using javascript and is cross-browser capable.
 
  • #13
Eng.Naif said:
in your example did you define the input as elm1 ?

You can set the Id attribute for most (All?) HTML elements. In my example, I set Id="1" for the <input> element. Doing that meant I could easily retrieve that element in my javascript function by using the document.getElementById("1") method, and store it in a variable which I declared as var elm1 in my function. The document.getElementById("1") method will return a DOM object for the element with Id="1", which will allow you to access all of the properties and and methods of the appropriate class of DOM Object, which in the case of my example was a DOM Text Object.
 

Similar threads

HTML/CSS Html5 <canvas> element related apps not working
  • · Replies 3 ·
Replies
3
Views
2K
HTML/CSS Parsing HTML and Searching Text
  • · Replies 5 ·
Replies
5
Views
3K
HTML/CSS HTML and PHP issue: display HTML form variables using PHP echo
  • · Replies 6 ·
Replies
6
Views
7K
What programming languages/pathways should I focus on?
  • · Replies 11 ·
Replies
11
Views
3K
JavaScript Need insert of mathcode in Table element
  • · Replies 13 ·
Replies
13
Views
2K
My Website For Creating Interactive Visuals Linked To Equations
  • · Replies 4 ·
Replies
4
Views
4K
HTML/CSS HTML/CSS: Placing DIVs Next to Each Other
  • · Replies 6 ·
Replies
6
Views
3K
Fortran An advanced example in fortran 77
  • · Replies 22 ·
Replies
22
Views
4K
JavaScript Changing textContent color in table at run time
  • · Replies 12 ·
Replies
12
Views
4K
Java How can I read a local file into an array in JavaScript?
  • · Replies 6 ·
Replies
6
Views
4K