Inserire un foglio di calcolo in una pagina

[hobbyeidee]

Ciao gruppo, c'è modo di inserire in una pagina o articolo una tabella che permetta al visitatore di fare dei calcoli?

qualcosa del genere: http://www.claredot.net/it/sez_Elett...ta-per-led.php

Ho installato table press ma non riesco a capire se permette di farlo, ho anche inserito una tabella creata con google docs, ma non mi permette di inserire i dati dalla pagina del mio sito.

Grazie per l'aiuto

[alemoppo]

La cosa migliore è inserire un codice javascript che faccia il calcolo, puoi inserirlo probabilmente tramite un plugin.

Ciao!

[frasidipace]

Ciao gruppo, c'è modo di inserire in una pagina o articolo una tabella che permetta al visitatore di fare dei calcoli?

qualcosa del genere: http://www.claredot.net/it/sez_Elett...ta-per-led.php

Ho installato table press ma non riesco a capire se permette di farlo, ho anche inserito una tabella creata con google docs, ma non mi permette di inserire i dati dalla pagina del mio sito.

Grazie per l'aiuto

Salve,
Table Press non consente ai visitatori di fare calcoli sulla tabella presente nella pagina.
Per fare qualcosa di simile a quanto presente sulla pagina Claredot può provare il plugin Calculated Fields Form che consente di creare forms dinamici.

Saluti

[hobbyeidee]

Ciao ragazzi, ieri sera ed oggi cercando online ho tentato di scrivere un codice, diciamo che funziona, devo modificare la grafica, ma penso sia facile, però non riesco a capire come modificare la funzione calcolo, in pratica vorrei far leggere i decimali sia scritti con "." che con ","
C'è modo di farlo? (devo continuare a cercare, come ho fatto ieri)

Inoltre non capisco come inserire il simbolo Ω dopo il valore e come farmi dare un risultato intero.
Se proprio devo chiedere mi piacerebbe che mi dasse Ω o MΩ in base al valore se sotto o sopra 1000

continuerò a cercare oltre che chiedere a voi :)

Buon pomeriggio

Ecco il codice, scusate se non è scritto bene ma lo sto compilando poco per volta.

<style>
input { border-radius: 10px;}
</style>
Alimentazione del circuito (Va) <input type = "text" id = "Alimentazione" size = "5"> <br>
Caduta di tensione del led (Vl)<input type = "text" id = "Caduta" size = "5"> <br>
Corrente del led (mA) <input type = "text" id = "Ampere" size = "5"> <br>
<input type = "button" onClick = "calc()" value = "Calcola"> <br>
<span id = "Resistenza"></span>
<script>
function calc()
{
    Alimentazione = parseFloat(document.getElementById("Alimentazione").value);
    Caduta = document.getElementById("Caduta").value;
    Ampere = document.getElementById("Ampere").value;
    document.getElementById("Resistenza").innerHTML = "<h3> Resisstenza: " + ((Alimentazione-Caduta)/Ampere) + "</h3>";
}
</script>

[alemoppo]

Inoltre non capisco come inserire il simbolo Ω dopo il valore

Vedi qui. In pratica devi usare l'entità: &#8486 (terminato dal ";" ).

e come farmi dare un risultato intero.

In pratica puoi usare parseInt oppure l'operatore or, vedi qui.

Se proprio devo chiedere mi piacerebbe che mi dasse Ω o MΩ in base al valore se sotto o sopra 1000

Ti consiglierei di mettere il risultato in un'altra variabile (chiamata Resistenza?), quindi se il valore è sopra 1000, dividi per 1000 ed inserisci il K. Se se sopra 1e6 dividi per 1e6 e aggiungi M, etc. Occhio però che in questo caso andrebbero tenute le eventuali cifre significative dopo la virgola.


Ti suggerire anche di indicare il valore commerciale che si avvicina di più al valore di resistenza calcolato

Ciao!

[GraphOGLRisorse]

Salve,
oltre a quanto esposto da alemoppo, per trovare tutte le entità html, può guardare qui.

Per la creazione del calcolatore, forse può tornarle utile anche analizzare il codice di questo esempio: RCCUtility

Cordiali saluti.

[hobbyeidee]

grazie per i link in questi giorni mi passo il tempo a leggerli per modificare il mio codice :)

Vi ringrazio anche per i suggerimenti di come migliorare la pagina, inserendo altri dati, li terrò in considerazione, dopo che capisco come fare la parte base

Ancora grazie per i vostri consigli

[hobbyeidee]

Ciao gruppo buona domenica, mi sono passato del tempo con il codice, piano piano sta prendendo forma.
ho due problemi potreste aiutarmi a capire?

1. vorrei diminuire la grandezza delle sezioni dove inserire i dati, mi piacerebbe vederli come in foto, mentre se apro l'articolo di vedono più grandi

2. come inserisco nella formula la scelta di "serie" o "parallelo" così da fare il calcolo in base al tipo di montaggio?

grazie.

P.s. vi ringrazio per i siti che mi avete consigliato ma non vorrei fare copia ed incolla vorrei approfittare dell'occasione per capirci qualcosa sui codici di scrittura :)

vi allego il codice scritto fino ad ora, magari un pò lungo ma non so come e se si può sintetizzare

https://hobbyeidee.altervista.org/1384-2/

Grazie ancora e buona domenica

<style>

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 12px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  padding: 10px 24px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.4s;
}

.button span:after {
  content: 'Ω';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.4s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.button1 {
  background-color: #6AB234; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: gray;
  color: white;
}

input.Va { border-radius: 10px; background-color: white; color: black; font-size: 14; border-style: solid; border-color: #6AB234; style="vertical-align:middle"; text-align: center; margin: 5px; }

input.Vl { border-radius: 10px; background-color: white; color: black; font-size: 14; border-style: solid; border-color: #6AB234; style="vertical-align:middle"; text-align: center; margin: 5px; }

input.A { border-radius: 10px; background-color: white; color: black; font-size: 14; border-style: solid; border-color: #6AB234; style="vertical-align:middle"; text-align: center; margin: 5px; }

.Formula { color: black; font-size: 20; margin: 10px; }

</style>
<form.action="">

<font font="" color="black" style="vertical-align:middle"> Alimentazione circuito (Va) <input type="text" class="Va" id="Alimentazione" size="6"> <br></font>

<font color="black">Caduta di tensione del led (Vl)<input type="text" class="Vl" id="Caduta" size="6"> <br></font>

<font color="black">Corrente del led (mA) <input type="text" class="A" id="Ampere" size="6"> <br></font>

<font color="black">Numero led <input type="text" class="A" id="Led" size="6"> <br></font><br>

<input type="radio" id="montaggio" name="installazione" value="serie">
&nbsp; <label for="serie">serie</label><br>
<input type="radio" id="montaggio" name="installazione" value="serie">
&nbsp; <label for="parallelo">parallelo</label><br><br>

<font class="Formula"> R = (Va - Vl)/A <br></font>

<button input="" type="button" class="button button1" onclick="calc()" value="Calcola" style="vertical-align:middle"><span>Calcola </span></button>

<br>
<span class="" id="Resistenza"></span>

<script>

function calc()
{
    Alimentazione = parseFloat(document.getElementById("Alimentazione").value);
    Caduta = document.getElementById("Caduta").value;
    Ampere = document.getElementById("Ampere").value;
    Led = document.getElementById("Led").value;
    document.getElementById("Resistenza").innerHTML = "<h3> Resistenza: "  +           
    Math.round(((Alimentazione-Caduta)/(Ampere / 1000))*Led) + "</h3>";

}
</script></form.action="">

[GraphOGLRisorse]

MI scuso per la risposta un po' tardiva.

1) Al momento le ho dato una sistemata al codice qui.

2) Potrebbe usare qualcosa del genere:

<script>
function CambiaCodice(parallelo)
{ 
  if(parallelo){
      // gestione serie
      document.getElementById("contenitore1").style.display = "block";
      document.getElementById("contenitore2").style.display = "none";
      // eventuale altro codice di gestione
   }else{
     // gestione parallelo
      document.getElementById("contenitore1").style.display = "none";
      document.getElementById("contenitore2").style.display = "block";
      // eventuale altro codice di gestione
  }
  if(window.editor){window.editor.refresh();}  
}

window.onload = function() {
  CambiaCodice(true);  
}
</script>

<input type="button" value="serie" onclick="CambiaCodice(false)">
<input type="button" value="parallelo" onclick="CambiaCodice(true)">

<div id="contenitore1">
  <!-- codice parallelo -->
   struttura parallelo
</div>
<div id="contenitore2">
  <!-- codice serie -->
   struttura serie 
</div>

Un esempio pratico di ciò che intendo, può vederlo nel codice di gestione per commutare da verticale ad orizzontale in questo mio applicativo.

Cordiali saluti.