Sovrapponi i pulsanti quando un numero deve essere premuto più di una volta durante un'equazione?

0

Sono molto nuovo in HTML5 (e nella codifica Web in generale) e sto cercando di creare un calcolatore interattivo. Cercherò di spiegarlo nel modo più chiaro possibile.

L'idea di base è che l'utente userà le equazioni preimpostate per aggiungere numeri alla calcolatrice. Tutti i pulsanti sulla calcolatrice avranno un effetto di "spinta verso il basso" animato, ma i pulsanti che devono essere premuti per eseguire l'equazione si illumineranno uno alla volta dopo che ciascun pulsante successivo viene premuto.

Mi sto bloccando sviluppando questo quando un numero deve essere premuto più di una volta durante un'equazione ... cioè 257 + 6732. - nota che il # 7 è usato due volte.

Ecco le mie due idee (entrambe hanno fallito):

  1. In questo esempio, il pulsante # 7 dovrebbe preformare due funzioni (la prima accendere il pulsante "più" al primo clic e la seconda la luce con il pulsante "tre" al secondo clic). la codifica del pulsante per eseguire due funzioni in questo modo è possibile, tuttavia, il pulsante può essere SOLO attivo nei punti corretti nell'equazione. Durante il resto dell'equazione, fare clic sul pulsante # 7 non preformerà alcuna funzione e fornirà solo una spinta animata effetto negativo.

o

  1. Il pulsante # 7 potrebbe essere duplicato e al primo clic il pulsante in alto scompare. Il secondo pulsante # 7 rimarrà quindi nascosto fino al momento opportuno durante l'equazione. Ancora una volta, il pulsante # 7 avrà un aspetto in grigio e darà solo un effetto push down animato mentre il pulsante non è in uso.

Qualcuno può far luce su questo per me? Sto tirando i miei capelli su questo. L'intero design è completo e le cose sembrano fantastiche, ma il valore di questo progetto si aggiunge a un POS finché non riesco a elaborare la codifica.

    
posta user115648 22.01.2014 - 05:06
fonte

1 risposta

0

Potresti gestire gli stati multipli usando il colore. Non sono chiaro su quanti stati ci sono da gestire, ma se sto leggendo questo giusto i tuoi pulsanti hanno bisogno di questi stati: non-premuto-ancora, premuto, ha bisogno di essere premuto e stato premuto.

  • Il non-premuto-ancora dovrebbe essere semplice
  • L'unico che dovrebbe essere 'premuto' è 'premuto' o gli utenti saranno confusi.
  • Gli altri che potresti trattare in modo più sottile, ad esempio usando:
    • un diverso colore di sfondo
    • un bordo diverso
    • un effetto visivo, come pulsate

Se viene premuto un pulsante e è necessario che si verifichi un'azione diversa, è possibile rendere l'azione condizionata dagli attributi di stile. In alternativa, puoi aggiungere un tag di dati a un determinato pulsante con il suo stato, ad esempio <button data-state="needs-to-be-pressed">3</button> e rendere l'azione condizionale su quell'attributo.

Considera il tuo utente finale in questo e non farli pensare

    
risposta data 22.01.2014 - 16:00
fonte

Leggi altre domande sui tag