Progetti JavaScript

Coding Creativo 27/10/2022

In questo articolo svilupperemo dei semplici progetti JavaScript, come ad esempio visualizzare un counter che si incrementa in vari modi.

Progetti JavaScript – counter

In questo primo progetto realizzeremo un counter utilizzando solo JavaScript Vanilla.

Provate a cliccare sui pulsanti sotto per incrementare o decrementare la variabile counter che parte dal valore inziale 0.

JavaScript Counter

Come possiamo sviluppare il codice?

Dapprima ecco il semplice codice html necessario per il nostro progetto.

Abbiamo inserito il button minus che ha la funzione di decrementare la variabile number ed il button plus che invece ha la funzione di incrementarla.

Per identificare ogni elemento abbiamo utilizzato un id, allo scopo di poter poi utilizzare il metodo getElementById in JavaScript.

Aggiungiamo poi del semplice codice CSS a piacere. Io ad esempio ho inserito questo:



.container {
    background-color: #2c45a3;
    text-align: center;
    padding: 20px;
    color: white;
}

h3 {
  font-size: 30px;  
}

button {
  font-size: 30px;
  background-color: #fc7180;
  color: #2c45a3;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
}

#number {
  font-size: 40px;
  padding: 0 50px;
}

Ed ecco dunque il codice JavaScript che utilizza il metodo addEventListener per intercettare il clik del mouse sui due pulsanti più e meno.

Quello che faremo al click del mouse su ciascun button sarà semplicemente incrementare o decrementare il valore della variabile e scriverla nell’elemento che ha id number attraverso la proprietà innerHTML.



const number = document.getElementById('number');
const buttonPlus = document.getElementById('plus');
const buttonMinus = document.getElementById('minus');

buttonPlus.addEventListener('click', add);
buttonMinus.addEventListener('click', subtract);

let value = 0;

function add() {
  value++;
  number.innerHTML = value;
}

function subtract() {
  value--;
  number.innerHTML = value;
}

Progetti JavaScript – counter con diversi valori di incremento

In questo secondo esempio incrementiamo il counter con valori diversi: 1, 5, 10 oppure 100.

Cliccate dunque sui vari button per vedere l’incremento della variabile di partenza.

JavaScript Counter

In questo secondo esempio abbiamo utilizzato l’evento onclick direttamente sul pulsante nel codice HTML.

Potete notare che abbiamo passato un secondo parametro a seconda del valore che vogliamo incrementare.

Ecco di seguito il codice JavaScript:



const number = document.getElementById('number');

let value = 0;

function add(n) {
  value = value + n;
  number.innerHTML = value;
}

Conclusione

In questo articolo abbiamo sviluppato un semplice counter. Continueremo poi nei prossimi articoli a sviluppare tanti interessanti progetti in JavaScript.

Alcuni link utili

Indice tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Come realizzare il gioco dei dadi online

Continua la lettura su: https://www.codingcreativo.it/progetti-javascript/ Autore del post: Coding Creativo Fonte: https://www.codingcreativo.it

Categorie: Coding Creativo, Vedi tutti i blog di Didattica

Tags: javascript, Web

Coding Creativo

DAL CNR IL VIDEOGAME PER INSEGNARE LA CYBERSECURITY AI RAGAZZI, 'NABBOVALDO E IL RICATTO DAL CYBERSPAZIO'

Grazie a Caldo Dutto per la segnalazione! Chiedo scusa per il ritardo del post, ma la mail era finita nello spam :)Un videogame educativo sulla cybersecurity, progettato con il CNR! In allegato le foto e un trailer qui: https://www.youtube.com/watch?v=YQy8pqol36cAl link www.youtube.com/watch?v=qeWx_nQXgdw una cronaca della presentazione a Cinecittà e una intervista alla dott.ssa Giorgia Bassi, curatrice del progetto.Presentato al RomeVideoGameLab, “Nabbovaldo e il ricatto dal cyberspazio”, videogioco per imparare la Cybersecurity.Il gaming in classe ora diventa didattica.Giocare a scuola sarà addirittura consigliato,grazie al Serious Game della Ludoteca del Registro.it, progetto in seno al CNRPresentato, in occasione del RomeVideoGameLab – quest’anno dedicata a “Umano e digitale” – il videogioco didattico “Nabbovaldo e il ricatto dal cyberspazio”, pensato per avvicinare gli alunni tra gli 11 e i 13 anni ai temi della cybersecurity e per migliorare i comportamenti nell’utilizzo della Rete. Una cronaca video della presentazione, realizzata da Giorgia Bassi e Beatrice Lami e che si è tenuta agli Studi di Cinecittà, al link www.youtube.com/watch?v=qeWx_nQXgdw. Un’avventura interattiva, tutta da giocare in aula: non una distrazione, ma anzi una best practice, quella di scaricare un’App e usare lo smartphone a scuola.Si tratta della nuova iniziativa della Ludoteca del Registro.it, che ha come obiettivo quello di diffondere la cultura di internet presso le giovani generazioni. La Ludoteca è un progetto del Registro.it, – l’organismo che, in seno all’Istituto di informatica e Telematica del Consiglio Nazionale delle Ricerche di Pisa, da oltre trent’anni anni assegna e gestisce i domini a targa italiana. Ambienti, mappe, dialoghi, scenari multipli sono i contenuti – validati dai ricercatori del CNR – alla base del videogame che ha l’obiettivo di approfondire, tra i bambini e i ragazzi, le conoscenze legate al Web e la sicurezza online. “Nabbovaldo e il ricatto dal cyberspazio” è stato pensato come strumento didattico per gli insegnanti e come mezzo di apprendimento per gli studenti. Attraverso le modalità tipiche del videogame, infatti, ha l’obiettivo di insegnare, in modo ironico e inconsueto, termini informatici, nozioni di base e comportamenti corretti per navigare. La sezione “Nabbopedia”, inoltre, fornisce un mini-dizionario con le definizioni di alcuni termini tecnici come Trojan, Firewall, Adware, Antivirus, Troll, Ransomware, Scandisk e Spyware. Il gioco, fruibile sia singolarmente che mentre si fanno lezioni e laboratori, genera un punteggio finale che evidenzia la conoscenza dell’utente sui pericoli di Internet, con una speciale attenzione a social network, virus, truffe online, file sharing e netiquette.Sviluppato in collaborazione con Symmaceo e Grifo Multimedia – e disponibile su App Store di Apple e Google Play – è ispirato al fumetto “Nabbovaldo contro i PC zombie”, della collana “Comics & Science” edita dal Cnr, dove il protagonista, un adolescente sempre online ma ingenuo nell’affrontare i pericoli del cyberspazio, si muove a Internetopoli, la città della Rete. Come si evince dal trailer, al link https://www.youtube.com/watch?v=YQy8pqol36c, il videogioco racconta di Nabbo, di professione tuttofare, coinvolto in un’avventura con al centro un Ramsomware (un malware che estorce denaro) che terrà sotto scacco l’intera città e dovrà indagare cercando una soluzione.Infine, per divulgare il videogame nelle scuole italiane è prevista una guida per genitori e insegnanti e una formazione per i docenti. Il gioco, infatti, oltre alla modalità “single-player”, prevede una versione desktop Windows e MacOS per l’utilizzo didattico in classe. La metodologia proposta dalla Ludoteca del Registro.it sarà inoltre quella della “flipped classroom”, ovvero il momento di confronto in classe come base per un apprendimento attivo e collaborativo, ma anche con il coinvolgimento di studenti degli istituti superiori nel ruolo di “tutor” per gli alunni delle scuole di ordine inferiore.Per maggiori informazioni:www.ludotecaregistro.it/il-videogioco-nabbovaldo/ludoteca@registro.itwww.instagram.com/ludotecadelregistro.it/www.facebook.com/LudotecaRegistrowww.youtube.com/channel/UCQvCwo8lOHfe–od7f2TIpQ

Guamodi Scuola 28/04/2022

Quiz sui termini del cyberbullismo

08
Feb

Quiz sui termini del cyberbullismo

In occasione della giornata sul cyberbullismo vi proponiamo un quiz realizzato dai ragazzi del PON sulla sicurezza in rete

by Eleonora, Andrei, Sofia e Miruna

Il tuo punteggio è

div#ays-quiz-container-5 * { box-sizing: border-box; } /* Styles for Internet Explorer start */ #ays-quiz-container-5 #ays_finish_quiz_5 { } /* Styles for Quiz container */ #ays-quiz-container-5{ min-height: 350px; width:400px; background-color:#fff; background-position:center center;border-radius:0px 0px 0px 0px;box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.4);border: none;} /* Styles for Navigation bar */ #ays-quiz-questions-nav-wrap-5 { width: 100%;border-radius:0px 0px 0px 0px;box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.4);border: none;} #ays-quiz-questions-nav-wrap-5 .ays-quiz-questions-nav-content .ays-quiz-questions-nav-item a.ays_questions_nav_question { color: #000; border-color: #000; background-color: #fff; } #ays-quiz-questions-nav-wrap-5 .ays-quiz-questions-nav-content .ays-quiz-questions-nav-item.ays-quiz-questions-nav-item-active a.ays_questions_nav_question { box-shadow: inset 0 0 5px #000, 0 0 5px #000; } #ays-quiz-questions-nav-wrap-5 .ays-quiz-questions-nav-content .ays-quiz-questions-nav-item.ays-quiz-questions-nav-item-answered a.ays_questions_nav_question { color: #fff; border-color: #fff; background-color: #000; } #ays-quiz-questions-nav-wrap-5 .ays-quiz-questions-nav-content .ays-quiz-questions-nav-item a.ays_questions_nav_question.ays_quiz_correct_answer { color: rgba(39, 174, 96, 1); border-color: rgba(39, 174, 96, 1); background-color: rgba(39, 174, 96, 0.4); } #ays-quiz-questions-nav-wrap-5 .ays-quiz-questions-nav-content .ays-quiz-questions-nav-item a.ays_questions_nav_question.ays_quiz_wrong_answer { color: rgba(243, 134, 129, 1); border-color: rgba(243, 134, 129, 1); background-color: rgba(243, 134, 129, 0.4); } /* Styles for questions */ #ays-quiz-container-5 #ays_finish_quiz_5 div.step { min-height: 350px; } /* Styles for text inside quiz container */ #ays-quiz-container-5.ays-quiz-container .ays-questions-container .ays-start-page *:not(input), #ays-quiz-container-5.ays-quiz-container .ays-questions-container .ays_question_hint, #ays-quiz-container-5.ays-quiz-container .ays-questions-container label[for^=”ays-answer-“], #ays-quiz-container-5.ays-quiz-container .ays-questions-container p, #ays-quiz-container-5.ays-quiz-container .ays-questions-container .ays-fs-title, #ays-quiz-container-5.ays-quiz-container .ays-questions-container .ays-fs-subtitle, #ays-quiz-container-5.ays-quiz-container .ays-questions-container .logged_in_message, #ays-quiz-container-5.ays-quiz-container .ays-questions-container .ays-quiz-limitation-count-of-takers, #ays-quiz-container-5.ays-quiz-container .ays-questions-container .ays-quiz-limitation-count-of-takers *, #ays-quiz-container-5.ays-quiz-container .ays-questions-container .ays_score_message, #ays-quiz-container-5.ays-quiz-container .ays-questions-container .ays_message{ color: #000; outline: none; } /* Quiz title / transformation */ #ays-quiz-container-5 .ays-fs-title{ text-transform: uppercase; text-align: center; } #ays-quiz-container-5 .ays-quiz-question-note-message-box, #ays-quiz-container-5 .ays_quiz_question, #ays-quiz-container-5 .ays_quiz_question *:not([class^=’enlighter’]) { color: #000; } #ays-quiz-container-5 textarea, #ays-quiz-container-5 input::first-letter, #ays-quiz-container-5 select::first-letter, #ays-quiz-container-5 option::first-letter { color: initial !important; } #ays-quiz-container-5 p::first-letter:not(.ays_no_questions_message) { color: #000 !important; background-color: transparent !important; font-size: inherit !important; font-weight: inherit !important; float: none !important; line-height: inherit !important; margin: 0 !important; padding: 0 !important; } #ays-quiz-container-5 .select2-container, #ays-quiz-container-5 .ays-field * { font-size: 15px !important; } #ays-quiz-container-5 .ays_quiz_question p { font-size: 16px; text-align: center; } #ays-quiz-container-5 .ays_quiz_question { text-align: center ; margin-bottom: 10px; } #ays-quiz-container-5 .ays_quiz_question pre { max-width: 100%; white-space: break-spaces; } div#ays-quiz-container-5 .ays-questions-container .ays-field, div#ays-quiz-container-5 .ays-questions-container .ays-field input~label[for^=’ays-answer-‘], div#ays-quiz-container-5 .ays-questions-container .ays-modern-dark-question *, div#ays-quiz-container-5 .ays-questions-container .ays_quiz_question, div#ays-quiz-container-5 .ays-questions-container .ays_quiz_question *{ word-break: break-word; } #ays-quiz-container-5 .ays-quiz-timer p { font-size: 16px; } #ays-quiz-container-5 section.ays_quiz_redirection_timer_container hr, #ays-quiz-container-5 section.ays_quiz_timer_container hr { margin: 0; } #ays-quiz-container-5 section.ays_quiz_timer_container.ays_quiz_timer_red_warning .ays-quiz-timer { color: red; } #ays-quiz-container-5 .ays_thank_you_fs p { text-align: center; } #ays-quiz-container-5 .information_form input[type=’text’], #ays-quiz-container-5 .information_form input[type=’url’], #ays-quiz-container-5 .information_form input[type=’number’], #ays-quiz-container-5 .information_form input[type=’email’], #ays-quiz-container-5 .information_form input[type=’tel’], #ays-quiz-container-5 .information_form textarea, #ays-quiz-container-5 .information_form select, #ays-quiz-container-5 .information_form option { color: initial !important; outline: none; margin-left: 0; background-image: unset; } #ays-quiz-container-5 .information_form input[type=’checkbox’] { margin: 0 10px; outline: initial; -webkit-appearance: auto; -moz-appearance: auto; position: initial; width: initial; height: initial; border: initial; background: initial; } #ays-quiz-container-5 .information_form input[type=’checkbox’]::after { content: none; } #ays-quiz-container-5 .wrong_answer_text{ color:#ff4d4d; } #ays-quiz-container-5 .right_answer_text{ color:#33cc33; } #ays-quiz-container-5 .ays_cb_and_a, #ays-quiz-container-5 .ays_cb_and_a * { color: rgb(0,0,0); text-align: center; } #ays-quiz-container-5 iframe { min-height: 350px; } #ays-quiz-container-5 label.ays_for_checkbox, #ays-quiz-container-5 span.ays_checkbox_for_span { color: initial !important; display: block; } /* Quiz textarea height */ #ays-quiz-container-5 textarea { height: 100px; min-height: 100px; } /* Quiz rate and passed users count */ #ays-quiz-container-5 .ays_quizn_ancnoxneri_qanak, #ays-quiz-container-5 .ays_quiz_rete_avg{ color:#fff; background-color:#000; } #ays-quiz-container-5 .ays-questions-container > .ays_quizn_ancnoxneri_qanak { padding: 5px 20px; } #ays-quiz-container-5 div.for_quiz_rate.ui.star.rating .icon { color: rgba(0,0,0,0.35); } #ays-quiz-container-5 .ays_quiz_rete_avg div.for_quiz_rate_avg.ui.star.rating .icon { color: rgba(255,255,255,0.5); } #ays-quiz-container-5 .ays_quiz_rete .ays-quiz-rate-link-box .ays-quiz-rate-link { color: #000; } /* Loaders */ #ays-quiz-container-5 div.lds-spinner, #ays-quiz-container-5 div.lds-spinner2 { color: #000; } #ays-quiz-container-5 div.lds-spinner div:after, #ays-quiz-container-5 div.lds-spinner2 div:after { background-color: #000; } #ays-quiz-container-5 .lds-circle, #ays-quiz-container-5 .lds-facebook div, #ays-quiz-container-5 .lds-ellipsis div{ background: #000; } #ays-quiz-container-5 .lds-ripple div{ border-color: #000; } #ays-quiz-container-5 .lds-dual-ring::after, #ays-quiz-container-5 .lds-hourglass::after{ border-color: #000 transparent #000 transparent; } /* Stars */ #ays-quiz-container-5 .ui.rating .icon, #ays-quiz-container-5 .ui.rating .icon:before { font-family: Rating !important; } /* Progress bars */ #ays-quiz-container-5 #ays_finish_quiz_5 .ays-progress { border-color: rgba(0,0,0,0.8); } #ays-quiz-container-5 #ays_finish_quiz_5 .ays-progress-bg { background-color: rgba(0,0,0,0.3); } #ays-quiz-container-5 .ays-progress-value { color: #000; text-align: center; } #ays-quiz-container-5 .ays-progress-bar { background-color: #27AE60; } #ays-quiz-container-5 .ays-question-counter .ays-live-bar-wrap { direction:ltr !important; } #ays-quiz-container-5 .ays-live-bar-fill{ color: #000; border-bottom: 2px solid rgba(0,0,0,0.8); text-shadow: 0px 0px 5px #fff; } #ays-quiz-container-5 .ays-live-bar-fill.ays-live-fourth, #ays-quiz-container-5 .ays-live-bar-fill.ays-live-third, #ays-quiz-container-5 .ays-live-bar-fill.ays-live-second { text-shadow: unset; } #ays-quiz-container-5 .ays-live-bar-percent{ display:none; } /* Music, Sound */ #ays-quiz-container-5 .ays_music_sound { color:rgb(0,0,0); } /* Dropdown questions scroll bar */ #ays-quiz-container-5 blockquote { border-left-color: #000 !important; } /* Question hint */ #ays-quiz-container-5 .ays_question_hint_container .ays_question_hint_text { background-color:#fff; box-shadow: 0 0 15px 3px rgba(0,0,0,0.6); max-width: 270px; } #ays-quiz-container-5 .ays_question_hint_container .ays_question_hint_text p { max-width: unset; } #ays-quiz-container-5 .ays_questions_hint_max_width_class { max-width: 80%; } /* Information form */ #ays-quiz-container-5 .ays-form-title{ color:rgb(0,0,0); } /* Quiz timer */ #ays-quiz-container-5 div.ays-quiz-redirection-timer, #ays-quiz-container-5 div.ays-quiz-timer{ color: #000; text-align: center; } #ays-quiz-container-5 div.ays-quiz-timer.ays-quiz-message-before-timer:before { font-weight: 500; } /* Quiz buttons */ #ays-quiz-container-5 input#ays-submit, #ays-quiz-container-5 #ays_finish_quiz_5 .action-button, div#ays-quiz-container-5 #ays_finish_quiz_5 .action-button.ays_restart_button { background-color: #27AE60; color:#333; font-size: 17px; padding: 10px 20px; border-radius: 3px; white-space: nowrap; letter-spacing: 0; box-shadow: unset; } #ays-quiz-container-5 input#ays-submit, #ays-quiz-container-5 #ays_finish_quiz_5 input.action-button { } #ays-quiz-container-5 #ays_finish_quiz_5 a[class~=ajax_add_to_cart]{ background-color: #fff; color:#333; padding: 10px 5px; font-size: 14px; border-radius: 3px; white-space: nowrap; border: 1px solid #333; } #ays-quiz-container-5 #ays_finish_quiz_5 .action-button.ays_check_answer { padding: 5px 10px; font-size: 17px !important; } #ays-quiz-container-5 #ays_finish_quiz_5 .action-button.ays_download_certificate { white-space: nowrap; padding: 5px 10px; } #ays-quiz-container-5 #ays_finish_quiz_5 .action-button.ays_arrow { color:#333!important; white-space: nowrap; padding: 5px 10px; } #ays-quiz-container-5 input#ays-submit:hover, #ays-quiz-container-5 input#ays-submit:focus, #ays-quiz-container-5 #ays_finish_quiz_5 .action-button:hover, #ays-quiz-container-5 #ays_finish_quiz_5 .action-button:focus { box-shadow: 0 0 0 2px #333; background-color: #27AE60; } #ays-quiz-container-5 .ays_restart_button { color: #333; } #ays-quiz-container-5 .ays_buttons_div { justify-content: center; } #ays-quiz-container-5 .step:first-of-type .ays_buttons_div { justify-content: center !important; } #ays-quiz-container-5 input[type=’button’], #ays-quiz-container-5 input[type=’submit’] { color: #333 !important; outline: none; } #ays-quiz-container-5 #ays_finish_quiz_5 i.ays_early_finish.action-button[disabled]:hover, #ays-quiz-container-5 #ays_finish_quiz_5 i.ays_early_finish.action-button[disabled]:focus, #ays-quiz-container-5 #ays_finish_quiz_5 i.ays_early_finish.action-button[disabled], #ays-quiz-container-5 #ays_finish_quiz_5 i.ays_arrow.action-button[disabled]:hover, #ays-quiz-container-5 #ays_finish_quiz_5 i.ays_arrow.action-button[disabled]:focus, #ays-quiz-container-5 #ays_finish_quiz_5 i.ays_arrow.action-button[disabled] { color: #aaa !important; } #ays-quiz-container-5 .ays_finish.action-button{ margin: 10px 5px; } #ays-quiz-container-5 .ays-share-btn.ays-share-btn-branded { color: #fff; } /* Question answers */ #ays-quiz-container-5 .ays-field { border-color: #444; border-style: solid; border-width: 1px; box-shadow: none;flex-direction: row-reverse; } #ays-quiz-container-5 .ays-quiz-answers .ays-field:hover{ opacity: 1; } #ays-quiz-container-5 #ays_finish_quiz_5 .ays-field label.ays_answer_caption[for^=’ays-answer-‘] { z-index: 1; position:initial;bottom:0;} #ays-quiz-container-5 #ays_finish_quiz_5 .ays-field input~label[for^=’ays-answer-‘] { padding: 5px; } #ays-quiz-container-5 #ays_finish_quiz_5 .ays-field { margin-bottom: 10px; } #ays-quiz-container-5 #ays_finish_quiz_5 .ays-field.ays_grid_view_item { width: calc(50% – 5px); } #ays-quiz-container-5 #ays_finish_quiz_5 .ays-field.ays_grid_view_item:nth-child(odd) { margin-right: 5px; } #ays-quiz-container-5 #ays_finish_quiz_5 .ays-field input:checked+label:before { border-color: #27AE60; background: #27AE60; background-clip: content-box; } #ays-quiz-container-5 .ays-quiz-answers div.ays-text-right-answer { color: #000; } /* Answer maximum length of a text field */ #ays-quiz-container-5 .ays_quiz_question_text_message{ color: #000; text-align: left; font-size: 12px; } div#ays-quiz-container-5 div.ays_quiz_question_text_error_message { color: #ff0000; } /* Questions answer image */ #ays-quiz-container-5 .ays-answer-image { width:15em; height:150px; object-fit: cover; } /* Questions answer right/wrong icons */ #ays-quiz-container-5 .ays-field input~label.answered.correct:after{ content: url(‘https://www.famacademy.it/wp-content/plugins/quiz-maker/public/images/correct.png’); } #ays-quiz-container-5 .ays-field input~label.answered.wrong:after{ content: url(‘https://www.famacademy.it/wp-content/plugins/quiz-maker/public/images/wrong.png’); } #ays-quiz-container-5 .ays-field label.answered:last-of-type:after{ height: auto; left: 10px;top: 10px;} /* Dropdown questions */ #ays-quiz-container-5 .select2-container–default .select2-search–dropdown .select2-search__field:focus, #ays-quiz-container-5 .select2-container–default .select2-search–dropdown .select2-search__field { outline: unset; padding: 0.75rem; } #ays-quiz-container-5 #ays_finish_quiz_5 .ays-field .select2-container–default .select2-selection–single { border-bottom: 2px solid #27AE60; background-color: #27AE60; } #ays-quiz-container-5 .ays-field .select2-container–default .select2-selection–single .select2-selection__rendered, #ays-quiz-container-5 .ays-field .select2-container–default .select2-selection–single .select2-selection__placeholder, #ays-quiz-container-5 .ays-field .select2-container–default .select2-selection–single .select2-selection__arrow { color: #d8519f; } #ays-quiz-container-5 .ays-field .select2-container–default .select2-selection–single .select2-selection__rendered, #ays-quiz-container-5 .select2-container–default .select2-results__option–highlighted[aria-selected] { background-color: #27AE60; } #ays-quiz-container-5 .ays-field .select2-container–default, #ays-quiz-container-5 .ays-field .select2-container–default .selection, #ays-quiz-container-5 .ays-field .select2-container–default .dropdown-wrapper, #ays-quiz-container-5 .ays-field .select2-container–default .select2-selection–single .select2-selection__rendered, #ays-quiz-container-5 .ays-field .select2-container–default .select2-selection–single .select2-selection__rendered .select2-selection__placeholder, #ays-quiz-container-5 .ays-field .select2-container–default .select2-selection–single .select2-selection__arrow, #ays-quiz-container-5 .ays-field .select2-container–default .select2-selection–single .select2-selection__arrow b[role=’presentation’] { font-size: 16px !important; } #ays-quiz-container-5 .select2-container–default .select2-results__option { padding: 6px; } /* Dropdown questions scroll bar */ #ays-quiz-container-5 .select2-results__options::-webkit-scrollbar { width: 7px; } #ays-quiz-container-5 .select2-results__options::-webkit-scrollbar-track { background-color: rgba(255,255,255,0.35); } #ays-quiz-container-5 .select2-results__options::-webkit-scrollbar-thumb { transition: .3s ease-in-out; background-color: rgba(255,255,255,0.55); } #ays-quiz-container-5 .select2-results__options::-webkit-scrollbar-thumb:hover { transition: .3s ease-in-out; background-color: rgba(255,255,255,0.85); } /* WooCommerce product */ #ays-quiz-container-5 .ays-woo-block { background-color: rgba(39,174,96,0.8); } #ays-quiz-container-5 .ays-woo-product-block h4.ays-woo-product-title > a { color: #000; } /* Audio / Video */ #ays-quiz-container-5 .mejs-container .mejs-time{ box-sizing: unset; } #ays-quiz-container-5 .mejs-container .mejs-time-rail { padding-top: 15px; } #ays-quiz-container-5 .mejs-container .mejs-mediaelement video { margin: 0; } /* Limitation */ #ays-quiz-container-5 .ays-quiz-limitation-count-of-takers { padding: 50px; } /* Hestia theme (Version: 3.0.16) | Start */ #ays-quiz-container-5 .mejs-container .mejs-inner .mejs-controls .mejs-button > button:hover, #ays-quiz-container-5 .mejs-container .mejs-inner .mejs-controls .mejs-button > button { box-shadow: unset; background-color: transparent; } #ays-quiz-container-5 .mejs-container .mejs-inner .mejs-controls .mejs-button > button { margin: 10px 6px; } /* Hestia theme (Version: 3.0.16) | End */ /* Go theme (Version: 1.4.3) | Start */ #ays-quiz-container-5 label[for^=’ays-answer’]:before, #ays-quiz-container-5 label[for^=’ays-answer’]:before { -webkit-mask-image: unset; mask-image: unset; } #ays-quiz-container-5.ays_quiz_classic_light .ays-field input:checked+label.answered:before, #ays-quiz-container-5.ays_quiz_classic_dark .ays-field input:checked+label.answered:before { background-color: #27AE60 !important; } #ays-quiz-container-5.ays_quiz_classic_light .ays-field input:checked+label.answered.correct:before, #ays-quiz-container-5.ays_quiz_classic_dark .ays-field input:checked+label.answered.correct:before { background-color: #27ae60 !important; } #ays-quiz-container-5.ays_quiz_classic_light .ays-field input:checked+label.answered.wrong:before, #ays-quiz-container-5.ays_quiz_classic_dark .ays-field input:checked+label.answered.wrong:before { background-color: #cc3700 !important; } /* Go theme (Version: 1.4.3) | End */ #ays-quiz-container-5 .ays_quiz_results fieldset.ays_fieldset .ays_quiz_question .wp-video { width: 100% !important; max-width: 100%; } /* Classic Dark / Classic Light */ /* Dropdown questions right/wrong styles */ #ays-quiz-container-5.ays_quiz_classic_dark .correct_div, #ays-quiz-container-5.ays_quiz_classic_light .correct_div{ border-color: green !important; opacity: 1 !important; background-color: rgba(39,174,96,0.4) !important; } #ays-quiz-container-5.ays_quiz_classic_dark .correct_div .selected-field, #ays-quiz-container-5.ays_quiz_classic_light .correct_div .selected-field { padding: 0px 10px 0px 10px; color: green !important; } #ays-quiz-container-5.ays_quiz_classic_dark .wrong_div, #ays-quiz-container-5.ays_quiz_classic_light .wrong_div{ border-color: red !important; opacity: 1 !important; background-color: rgba(243,134,129,0.4) !important; } #ays-quiz-container-5.ays_quiz_classic_dark .ays-field.checked_answer_div.wrong_div input:checked~label, #ays-quiz-container-5.ays_quiz_classic_light .ays-field.checked_answer_div.wrong_div input:checked~label { background-color: rgba(243,134,129,0.4) !important; } #ays-quiz-container-5 .ays_question_result .ays-field .ays_quiz_hide_correct_answer:after{ content: ” !important; } #ays-quiz-container-5 .ays-quiz-close-full-screen { fill: #000; } #ays-quiz-container-5 .ays-quiz-open-full-screen { fill: #000; } @media screen and (max-width: 768px){ #ays-quiz-container-5{ max-width: 100%; } div#ays-quiz-container-5.ays_quiz_modern_light .step, div#ays-quiz-container-5.ays_quiz_modern_dark .step { padding-right: 0px !important; padding-top: 0px !important; } div#ays-quiz-container-5.ays_quiz_modern_light div.step[data-question-id], div#ays-quiz-container-5.ays_quiz_modern_dark div.step[data-question-id] { background-size: cover !important; background-position: center center !important; } div#ays-quiz-container-5.ays_quiz_modern_light .ays-abs-fs:not(.ays-start-page):not(.ays-end-page), div#ays-quiz-container-5.ays_quiz_modern_dark .ays-abs-fs:not(.ays-start-page):not(.ays-end-page) { width: 100%; } } /* Custom css styles */ /* RTL direction styles */

#ays-quiz-container-5 p {
margin: 0.625em;
}

#ays-quiz-container-5 .ays-field.checked_answer_div input:checked~label {
background-color: rgba(39,174,96,0.6);
}
#ays-quiz-container-5.ays_quiz_classic_light .enable_correction .ays-field.checked_answer_div input:checked+label,
#ays-quiz-container-5.ays_quiz_classic_dark .enable_correction .ays-field.checked_answer_div input:checked+label {
background-color: transparent;
}
#ays-quiz-container-5 .ays-field:hover{
background: rgba(39,174,96,0.8);
color: #fff;
transition: all .3s;
}
#ays-quiz-container-5 #ays_finish_quiz_5 .action-button:hover,
#ays-quiz-container-5 #ays_finish_quiz_5 .action-button:focus {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 3px #333;
background: #27AE60;
}

Famacademy 08/02/2022

Progetti JavaScript – counter

JavaScript Counter

Progetti JavaScript – counter con diversi valori di incremento

JavaScript Counter

Conclusione

Alcuni link utili

Articoli Correlati