Przetestuj kod HTML z wynikami pośrednimi. Ćwicz w piaskownicy. Jakie znaczniki tworzą akapit w dokumencie

Teraz strona jest dostępna do testowania znajomości następujących tematów: HTML, css, JavaScript, PHP, SQL.

Każdy test składa się z 10 pytania na określony temat. W każdym pytaniu starałem się poruszyć najróżniejsze obszary zastosowania danego języka, aby jak najdokładniej sprawdzić Twój poziom wiedzy.

Oczywiście wszystko testy są bezpłatne i każdy może przejść.

Procedura testowa:

  1. Śledź ten link " Rozpocznij testowanie” odpowiedniego testu.
  2. Odpowiedz na pytania, wybierając jedyny poprawna opcja.
  3. Po zakończeniu testów zobaczysz Twój wynik, liczba błędów, jak również analiza każdego pytania z testu.

Uwaga! Powrót do poprzedniego pytania nie zadziała, więc zanim odpowiesz, zastanów się.

Obecnie dostępne testy

  1. HTML

    • Całkowity zdany test: 67354 osób
    • Średni wynik: 2,85 z 5 zwrotnica.

    Test wiedzy podstawowej HTML. Musisz znać podstawowe Tagi HTML i ich właściwe użytkowanie. Konieczne jest również zrozumienie cech standardu XHTML 1.1.

  2. css

    • Całkowity zdany test: 29039 osób
    • Średni wynik: 3,38 na 5 zwrotnica.

    Test sprawdza znajomość podstaw css. Aby pomyślnie zdać test, musisz znać podstawowe typy selektorów (ich składnię), znać podstawowe właściwości i ich możliwe wartości, a także znać przeznaczenie najpopularniejszych pseudoelementów.

  3. JavaScript

    • Całkowity zdany test: 22972 osób
    • Średni wynik: 3,3 na 5 zwrotnica.

    Ten quiz sprawdza Twoją znajomość języka JavaScript. Pytania z testu dotyczą różnych obszarów zastosowania tego języka. Istnieje wiele pytań dotyczących zrozumienia „małych” niuansów. W przeciwnym razie musisz znać podstawowe rzeczy: pracę ze zmiennymi, podstawowe funkcje JavaScript, priorytety operatorów i tak dalej.

  4. PHP

    • Całkowity zdany test: 31651 osób
    • Średni wynik: 3.03 z 5 zwrotnica.

    Ten quiz sprawdza Twoją znajomość języka PHP. Musisz znać podstawowe konstrukcje PHP, pracować ze zmiennymi, sesjami, implementacją przekierowań i innymi standardowymi rzeczami.
    Przekonująca prośba: Test zawiera wiele pytań typu: „Co wygeneruje skrypt?”. Duża prośba, nie kopiuj i sprawdzaj. Bądź ze sobą szczery.

  5. SQL

    • Całkowity zdany test: 17168 osób
    • Średni wynik: 3,29 na 5 zwrotnica.

    Ten test sprawdza Twoją znajomość języka Zapytania SQL. Pytania obejmują tylko najbardziej podstawową znajomość tego języka, bez pogłębiania. Będziesz potrzebować znajomości najbardziej podstawowych zapytań SQL, a także ich umiejętnego wykorzystania.

Jeśli chcesz poprawić swoje umiejętności programistyczne, najlepszym sposobem na poprawę jest praktyka. Zwracamy uwagę na zasoby do testowania wiedzy w HTML/CSS.

Dlatego ważne jest, aby znaleźć różne sposobyćwicz i identyfikuj swoje mocne i słabe strony.
Praktyczne doświadczenie pomaga racjonalnie oceniać braki w ich wiedzy i stale doskonalić swoje umiejętności. Co więcej, sprawdzenie swojej wiedzy zapewni Ci pewność, że będziesz na bieżąco z najnowszymi trendami w swojej dziedzinie.

Oto dziesięć sposobów, aby sprawdzić swoją wiedzę o HTML i CSS i stać się lepszym twórcą stron internetowych.

Rozpocznij własny projekt

Bycie ekspertem w teorii jest wspaniałe, ale jest mało prawdopodobne, aby osiągnąć wielkie wyżyny, jeśli nie wiesz, jak zastosować swoją rozległą wiedzę w praktyce. Dlatego rozpoczęcie projektu jest dla Ciebie najlepszym sposobem działania. W procesie tworzenia np. własnej strony internetowej będziesz mógł zaznaczać postępy i oceniać realizację swoich celów.

konkurować

Najlepszym sposobem sprawdzenia się pod kątem siły jest branie udziału w prawdziwych zawodach programistycznych, na przykład w społeczności Wojny kodów. W formie gry konkurujesz z innymi prawdziwi ludzie uczenie się na własnych błędach. Ale ma to sens tylko wtedy, gdy grasz fair.

Dołącz do społeczności

Jeśli konkurencja jest dla Ciebie zbyt trudna, zwłaszcza jeśli jesteś zupełnie nowy, dobra opcja dołączy do społeczności w celu testowania i dalszej nauki. W procesie komunikacji znacznie łatwiej jest zidentyfikować swoje mocne i słabe strony oraz nad nimi pracować.

Jednocześnie społeczność to towarzystwo utalentowanych ludzi, którzy dają możliwość i motywację do doskonalenia się. Uczestnicząc w dyskusjach możesz bezpiecznie zadawać pytania i uzyskiwać potrzebne informacje.

Ćwicz w piaskownicy

To narzędzie uruchamia Twój kod i pozwala zobaczyć wynik jego wykonania. Projekty uruchamiane są w przeglądarce i mogą brać udział w konkursach i konkursach, które pokażą, jak wysokie oczekiwania mogą spełnić.

Zasób zawiera wiele projektów otwartych do nauki, które pozwolą Ci zrozumieć, jak działają i zastosować zdobytą wiedzę we własnej praktyce. Od czasu do czasu, aby zmotywować uczestników, na stronie organizowane są konkursy, w których można zmierzyć swoje siły z innymi programistami z możliwością zajęcia wysokich miejsc w tabeli liderów i wygrania nagród.

Wypróbuj łamigłówki i quizy

W Internecie dostępna jest szeroka gama quizów i gier logicznych, które obejmują HTML, CSS i inne języki programowania. Z reguły są one obecne na płatnych stronach jako dodatek do szkoleń. Możesz także ćwiczyć z bardziej doświadczonym mentorem.

bawić się

Nie jest tajemnicą, że jeśli nagle zdecydujesz się na zabawę, możesz czerpać z tej formy nauki znacznie więcej korzyści niż z suchej teorii i rozwiązywania ćwiczeń. Grając wraz z umiejętnościami programistycznymi otrzymujesz przyjemność, ładunek pozytywnych wrażeń i wysoki poziom zadowolenia z efektów. Gra sprawia, że ​​pojawiające się zadania są żywsze i ciekawsze, co sprawia, że ​​działa fantazja i kreatywne myślenie.

Znajdź stronę z interaktywnymi testami

przez większość w prosty sposób aby obiektywnie ocenić umiejętności programistyczne, należy odwiedzić witrynę w celu przetestowania. Testy dają możliwość pracy nad różnymi pytaniami i dobrej praktyki. Możesz ocenić swój poziom przed i po zdaniu dowolnego testu lub kursu testów.

Zdyscyplinuj się

Ważną częścią procesu uczenia się i sprawdzania własnej wiedzy jest identyfikacja najbardziej Najlepszym sposobem osiągnąć maksymalną produktywność. Możesz wziąć udział w zajęciach, które pomogą Ci znaleźć tę drogę. Na przykład, Czyste kodery to witryna, która zapewnia taką możliwość dzięki profesjonalnym filmom szkoleniowym. Co więcej, te filmy są bardzo interesujące, więc nie musisz się martwić o koncentrację, zaangażujesz się od pierwszych minut.

Spójrz na świat dookoła

Postaw się obok programistów z całego świata. Jest sieć społeczna, który pozwala łączyć się z niezależnymi programistami z ponad stu krajów na całym świecie. Znajdziesz wielu utalentowanych ludzi, a także możliwość oceny swoich umiejętności i nauczenia się nowych rzeczy.

Przeszukaliśmy, szukaliśmy określonego przez Ciebie pliku, ale go nie znaleźliśmy. Może to mieć miejsce w jednym z dwóch przypadków:

  1. Zrobiłeś coś złego.
  2. Zrobiliśmy coś złego.

Aby następnym razem nie wpaść w podobną sytuację, prosimy o wysłuchanie krótkiego wykładu wyjaśniającego jak i dlaczego pojawia się strona z błędem o kryptonimie 404.

Jak i dlaczego pojawia się strona błędu 404?

Oczywiście często zastanawiałeś się, dlaczego wpisując adres strony lub klikając w konkretny link, pojawia się coś zupełnie innego niż oczekiwano, ale tajemnicza i niezrozumiała strona zawierająca informacje, których absolutnie nie potrzebujemy. Nie dość, że jesteśmy rozczarowani, bo zamiast tego, czego chcemy, wsuwają nam „makietę”, to jeszcze ta strona jest zwykle obwieszona banerami, jakby wszyscy ją odwiedzali.

Tak więc strona błędu 404 pojawia się w wyniku następujących sytuacji. A skoro czytasz ten tekst, to znaczy, że jesteś w jednym z nich.

1. Adres strony został wpisany z błędem

Cóż, popełnili błąd, z którym to się nie dzieje. Przyjrzyj się uważnie i ponownie wpisz adres. Jeśli jesteś pewien, że wpisałeś wszystko poprawnie, przejdź do następnego kroku.

2. Strona została przeniesiona lub usunięta przez administratora serwisu

Była strona, ale unosiła się. Może to usunęli, może zmienili nazwę, a może przenieśli, a może… Tak, wszystko może się zdarzyć. Ponieważ administrator może robić co chce na stronie. Dlatego jest administratorem! W tym przypadku pozostaje tylko złapać go w ciemnym kącie i grzecznie powiedzieć: „Jak to! Gdzie jest strona spraw, pytam po raz ostatni, strona, skoro wasza dwójka jest taka, dokąd idziecie? Wróć do swojego miejsca!” Następnie każda rozsądna osoba, rozumiejąc głębię swojego złudzenia i całkowitą niekompetencję, dokonuje przekierowania z adresu stara strona na nowy adres. I jesteśmy zadowoleni, możemy ponownie wybrać zwykły adres, nie martwiąc się już o to, czy jest poprawny, czy nie.

3. Deweloper błędnie wpisał adres URL linku

Po raz kolejny historia powtarza się pod ciemnym kątem. Tylko tym razem łapiemy programistę, który składał stronę i umieszczał na niej linki. I znowu, grzecznym tonem, bawiąc się zimnym, ostrym przedmiotem w pobliżu jego miękkich części ciała, prosimy o zrobienie wszystkiego dobrze. Po prostu nie da się oprzeć tak niewinnej prośbie.

Po przeczytaniu możesz pomyśleć, że trafiłeś na tę stronę wyłącznie z winy autora tej strony. Zapewniam, że tak nie jest. Przeczytaj pierwszy akapit, wszystko tam jest napisane.

W artykule opisano sekwencyjne tworzenie testu szkoleniowego. Jeśli nie chcesz czytać o programowaniu, przejdź bezpośrednio do działu z instrukcjami modyfikacji testu i jego pobrania.


Utwórz prosty test

Rozwój Technologie informacyjne a kształcenie na odległość prowadzi do konieczności tworzenia elektronicznych testów uczenia się. Wielu nauczycieli i edukatorów staje przed wyzwaniem tworzenia testów uczenia się. Główną trudnością w rozwiązaniu tego problemu jest to, że tworzenie takich materiałów elektronicznych wymaga znajomości HTML i javascript.

Jak rozwiązać ten problem. Nauczyciel może skorzystać z kreatora testów online lub spróbować samodzielnie stworzyć test na podstawie szablonu. To druga opcja, którą rozważymy w tym artykule.

Stworzymy prosty szablon, który następnie można pomnożyć do kilku plików i zamienić każdy w osobny test.

Załóżmy, że istnieje prosty test matematyczny, składający się z kilku zadań matematycznych:

  1. 4*12 +7 =
  2. 7-8*2 =
  3. 34*2 + 17 =

Przykłady muszą być wyświetlane na ekranie i dać uczniowi możliwość wpisania odpowiedzi, a następnie porównania odpowiedzi z poprawną i pokazania uczniowi procentu poprawnie wykonanego zadania.

Najpierw utwórzmy kod HTML zadania:

4*12 + 7 =


7-8*2 =


34*2 + 17 =



Naprzeciw każdego zadania testu szkoleniowego podstawiliśmy pole do wpisywania tekstu. Przeczytaj więcej o różnych polach w HTML w artykule pod linkiem. Na koniec dodaliśmy przycisk, który po kliknięciu powinien sprawdzić, co uczeń wpisał w odpowiedziach tekstowych.

Zwróć uwagę na identyfikatory „z_1”, „z_2” i „z_3”. Jeśli chcesz dodać zadanie 4, wystarczy skopiować ostatnią linię z zadaniem, zastąpić warunek i wpisać „z_4” w polu identyfikatora.

W ostatniej linii pokażemy wynik zadań po sprawdzeniu.

Następnym krokiem jest stworzenie kodu javascript, który będzie porównywał to, co wpisał uczeń, z poprawnymi odpowiedziami i obliczył procent wykonanych zadań.

pr_otv_zadachi_1 = 55;
pr_otv_zadachi_2 = -9;
pr_otv_zadachi_3 = 85;

Pierwsze trzy wiersze będą zawierały poprawne odpowiedzi. Zadanie czwarte i kolejne są dodawane do testu poprzez kopiowanie Ostatni wiersz z odpowiedzią, zastępując cyfrę 4 zamiast 3 i wskazując poprawną odpowiedź.

Teraz musisz dowiedzieć się, co uczeń wpisał w odpowiedzi. Do tego używamy następującego kodu.

otv_uch_1 = document.getElementById('z_1').value;
otv_uch_2 = document.getElementById('z_2').value;
otv_uch_3 = document.getElementById('z_3').value;

Czwartym zadaniem będzie Nowa linia z wymianą cyfr 3 na 4.

piłka = 0;
piłka +=1;
}
piłka +=1;
}
piłka +=1;
}

Aby dodać zadanie 4, musisz skopiować ostatnie trzy wiersze i zastąpić w nich liczby 4.

vsego_task = 3

W tej linii wskazujemy, ile zadań znajduje się w teście szkoleniowym. Jeśli dodałeś więcej, musisz poprawić tę liczbę.

Następnie musisz wyświetlić odpowiedź na ekranie.

document.getElementById('rezultat').innerHTML = “Zadania wykonane poprawnie w ”+procent_vip+”%.”;

To wszystko. Teraz połączmy cały kod w jedną stronę HTML.


Wielokrotny test matematyczny



Wykonaj zadania testowe:


4*12 + 7 =


7-8*2 =


34*2 + 17 =






To cały kod do testu praktycznego z odpowiedziami HTML. Możesz pobrać ten plik poniżej. Posługiwać się ten podręcznik w celu zwiększenia lub zmniejszenia liczby zadań.


Pobierz szablon testu. Łatwa opcja

Pobierz plik: (pliki do pobrania: 593)

Poniżej możesz pobrać rozszerzoną wersję testu.

Rozdzielenie pytań testowych. Dodawanie przycisku następnego pytania

Musimy upewnić się, że w danym momencie wyświetlane jest tylko jedno pytanie. Aby przejść do następnego pytania, trzeba było kliknąć przycisk „Następne pytanie”.

Aby to zrobić, dodajmy każde pole pytania i odpowiedzi do oddzielnych elementów div. Ponadto w przypadku drugiego i trzeciego pytania dodamy parametr „display:none”, aby je ukryć. W pierwszym określ parametr „wyświetlanie: blok”. A dla każdego bloku podpiszemy numery pytań.

Pytanie 1

4*12 + 7 =

Dodamy również kod dla przycisku „Następne pytanie”.


Function sled_vopr()( if(document.getElementById("vopros2").style.display == "blok")( document.getElementById("vopros2").style.display = "none"; document.getElementById("vopros3" ).style.display = "blok";document.getElementById("kn_sl").style.display = "brak";document.getElementById("kn_pr").style.display = "blok"; ) if(document.getElementById ("vopros1").style.display == "blok")( document.getElementById("vopros1").style.display = "brak"; document.getElementById("vopros2").style.display = "blok"; ) )

W pierwszym warunku sprawdzamy, czy wyświetla się drugie pytanie, jeśli tak, to musimy je ukryć i wyświetlić trzecie pytanie, a także musimy ukryć przycisk do przełączania się między pytaniami testowymi i pokazać przycisk „Sprawdź”, ponieważ to jest ostatnie pytanie. W drugim warunku sprawdzamy, czy wyświetla się pierwsze pytanie testowe. Jeśli tak, to musisz to ukryć i pokazać drugie pytanie.

W rezultacie nasz test wygląda tak:





Ale w tej opcji dodawanie nowych pytań do testu będzie trudniejsze.

Przenoszenie pytań testowych i odpowiedzi do osobnego pliku JavaScript

Aby ułatwić zastępowanie pytań, musisz je przenieść wraz z odpowiedziami do oddzielny plik. Wtedy nie musisz szukać tych danych w głównym pliku. Jeśli nie jesteś programistą, to takie wyszukiwanie nie będzie łatwe. Więc tworzymy nowy plik data.js i podłącz go do głównego plik html nasz test. Następnie dodajemy kilka zmiennych z pytaniami i kilka z odpowiedziami (odpowiedzi przenosimy z pliku głównego).

Pytania_1 = "4*12 + 7 ="; pytania_2 = "7-8*2 = "; pytania_3 = "34*2 + 17 = "; pr_otv_zadachi_1 = 55; pr_otv_zadachi_2 = -9; pr_otv_zadachi_3 = 85;

Pytanie 1

I piszemy kod javascript do ustawiania tekstu pytań ze zmiennych po załadowaniu strony.

Document.addEventListener("DOMContentLoaded", function()( document.getElementById("v_1").innerHTML = vopros_1; document.getElementById("v_2").innerHTML = vopros_2; document.getElementById("v_3").innerHTML = vopros_3 ;));

To wszystko. Teraz, aby podmienić tekst pytań testowych i odpowiedzi na nie, wystarczy edytować plik data.js. Podobnie dodaj nazwę testu:

Test Var = "Pomnóż";

Szyfrowanie odpowiedzi testowej

W programie testu szkoleniowego, który otrzymaliśmy, jest jedna wada. Jeśli uczeń otworzy plik „data.js”, zobaczy nie tylko teksty pytań, ale także odpowiedzi. Dlatego musimy zaszyfrować odpowiedzi, aby uczeń nie mógł ich rozpoznać.

W tym celu korzystamy z funkcji kodirov. To wygląda tak:

Funkcja kodirov(stroka) ( var b64ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg"+ "hijklmnopqrstuvwxyz0123456789+/="; var b64enc = ""; var ch1, ch2, ch3; var en1, en2, ivar i=en4; dla > 2; en2 = ((kan.1 i 3)<< 4) | (ch2 >> << 2) | (ch3 >>

Podobnie szyfrujemy drugie i trzecie pytanie. Po zaszyfrowaniu zawartość pliku data.js wygląda tak:

Varvopros_1 = "4*12 + 7 ="; var pytania_2 = "7-8*2 = "; var pytania_3 = "34*2 + 17 = "; varpr_otv_zadachi_1 = "NTU="; var pr_otv_zadachi_2 = "LTk="; varpr_otv_zadachi_3 = "ODU=";

Jak widać, odpowiedzi są zaszyfrowane i stanowią zestaw znaków.

W głównym pliku przed sprawdzeniem należy zaszyfrować to, co napisał uczeń.

Otv_uch_1 = document.getElementById("z_1").value; otv_uch_1 = kodirov(otv_uch_1); otv_uch_2 = document.getElementById("z_2").value; otv_uch_2 = kodirov(otv_uch_2); otv_uch_3 = document.getElementById("z_3").value; otv_uch_3 = kodirov(otv_uch_3);

W efekcie program sprawdza zaszyfrowane odpowiedzi, a uczeń nie może znaleźć odpowiedzi na pytania z testu edukacyjnego.

Wypisywanie odpowiedzi na każde pytanie

Nasz próbny test wyświetla ogólny wynik w procentach. Zróbmy to tak, aby wyświetlane były również wyniki dla każdego pytania z osobna. W ten sposób będzie można wykonać więcej szczegółowa analiza uczniów wykonujących test.

W tym celu należy zmodyfikować funkcję sprawdzania odpowiedzi uczniów.

Funkcjaprovit()( otv_uch_1 = document.getElementById("z_1").value; otv_ucgenika_1 = otv_uch_1; otv_uch_1 = kodirov(otv_uch_1); otv_uch_2 = document.getElementById("z_2").value; otv_2 = otv_otv_uch_uch_2; otv_uch_2); otv_uch_3 = document.getElementById("z_3").value; otv_ucgenika_3 = otv_uch_3; otv_uch_3 = kodirov(otv_uch_3); piłka = 0; if(otv_uch_1 == pr_otv_zada = "; estion 1.)( piłka Odpowiedziałeś poprawnie. Twoja odpowiedź to:"+otv_ucgenika_1; ) else ( otveti = "Pytanie 1. Odpowiedziałeś niepoprawnie. Twoja odpowiedź to:"+otv_ucgenika_1; ) if(otv_uch_2 == pr_otv_zadachi_2)( piłka +=1; otveti += "
Pytanie 2. Odpowiedziałeś poprawnie. Twoja odpowiedź: "+otv_ucgenika_2; ) else ( odpowiedź += "
Pytanie 2. Odpowiedziałeś niepoprawnie. Twoja odpowiedź: "+otv_ucgenika_2; ) if(otv_uch_3 == pr_otv_zadachi_3)( piłka +=1; odpowiedź += "
Pytanie 3. Odpowiedziałeś poprawnie. Twoja odpowiedź: "+otv_ucgenika_3; ) else ( odpowiedź += "
Pytanie 3. Odpowiedziałeś niepoprawnie. Twoja odpowiedź:"+otv_ucgenika_3; ) vsego_zadach = 3; procent_vip = ball/vsego_zadach * 100; document.getElementById("resultat").innerHTML = "Zadania wykonane poprawnie na "+procent_vip+"%.

"+odpowiedź; )

W wyniku modyfikacji tej funkcji wyświetlane jest, czy uczeń odpowiedział poprawnie, a także jego odpowiedź jest wyświetlana na ekranie. Nauczyciel może porównać odpowiedź ucznia z poprawną, a także przeanalizować pracę dydaktyczną.

W ten sposób otrzymaliśmy pełnoprawny test edukacyjny, który można wykorzystać w swoich działaniach edukacyjnych. Dla większej wygody przeniosłem plik data.js do osobnego folderu. Możesz edytować plik data.js w dowolnym Edytor tekstu na przykład Notatnik.

Po ostatnich modyfikacjach, zwiększeniu czcionek, dodaniu koloru do odpowiedzi, otrzymujemy następującą kompletność źródło plik html:

Test

Test. Podmiot. .

Pytanie 1

Wynik wykonania testu z błędem w trzecim zadaniu przedstawia poniższy rysunek. Dodałem również funkcję "toFixed()" do zaokrąglania procentu wykonanych zadań.


Poniżej możesz pobrać ten program.

Pobierz szablon testowy

Pobierz plik: (pliki do pobrania: 93)
Pobierz plik: (pliki do pobrania: 102)
Pobierz plik: (pliki do pobrania: 120)

Możesz zakodować odpowiedzi do testu na naszej stronie internetowej.

Dodawanie obrazów do pytań quizowych

Oczywiście w przypadku wielu pytań podczas tworzenia testu musisz dodać obrazy. Często zamiast tekstu pytania trzeba dodać obrazek. Wdrażamy ta okazja również poprzez plik data.js. Zredaguję największy test składający się z 15 pytań. Tak więc do każdego pytania dodam osobną zmienną i wskażę w niej: jeśli jest obraz, to - "tak", w przeciwnym razie - "nie".

var pytania_ris_1 = "tak"; var pytania_ris_2 = "nie"; var pytania_ris_3 = "nie"; var question_ris_4 = "tak"; var pytania_ris_5 = "nie"; var pytania_ris_6 = "nie"; var question_ris_7 = "tak"; var pytania_ris_8 = "nie"; var pytania_ris_9 = "nie"; var pytania_ris_10 = "nie"; var pytania_ris_11 = "nie"; var pytania_ris_12 = "nie"; var pytania_ris_13 = "nie"; var pytania_ris_14 = "nie"; var question_ris_15 = "tak";

Zwracam uwagę na to, że tekst pytania w przypadku obrazu całkowicie usunąłem.

varvopros_1 = ""; var pytania_2 = "7-8*2 = "; var pytania_3 = "34*2 + 17 = "; var pytania_4 = ""; var pytania_5 = "36*2 + 4 = "; var pytania_6 = "37*8 + 7 = "; var pytania_7 = ""; var pytania_8 = "39*12 + 19 = "; var pytania_9 = "40*2 + 16 = "; var pytania_10 = "41*4 + 3 = "; var pytania_11 = "42*8 - 7 = "; var pytania_12 = "43*6 - 5 = "; var pytania_13 = "4*62 - 6 = "; var pytania_14 = "45*9 - 9 = "; var pytania_15 = "";

Ale możesz też dodać zarówno obraz, jak i tekst pytania.

W tym przypadku zaznaczyłem, że w pytaniach o numerach 1,4,7 i 15 będą obrazy. Dlatego muszę dodać te obrazy do folderu „data”. Ich nazwy powinny odpowiadać (wraz z treścią) numerom pytań: "01.jpg", "04.jpg", "07.jpg" i "15.jpg".


W kod programowania W głównym pliku dodałem warunki testujące zmienne. Jeśli jest obraz, to jest on ładowany do pytania testowego. Przykład takiego kodu dla pierwszego pytania: if(vopros_ris_1 == "tak")( vopros_1 = "

"+vopros_1; document.getElementById("v_1").innerHTML = vopros_1; ) else ( document.getElementById("v_1").innerHTML = vopros_1; )

Pobierz plik: (pliki do pobrania: 57)

Losowo mieszaj pytania testowe

W przypadku, gdy test jest wykonywany jednocześnie przez kilku uczniów w klasie, którzy siedzą obok mnie, napotkałem problem, gdy niektórzy patrzą na to, co inni siedzący obok odpowiadają. To pierwszy powód do mieszania pytań. Drugi to po prostu tworzenie duża liczba wersje tego samego testu.

Te manipulacje nieco komplikują program. Aby to zrobić, musisz stworzyć tablicę, umieścić w niej wszystkie pytania, obrazki i odpowiedzi, a następnie potasować wszystko w losowej kolejności.

Jednocześnie nie edytowałem pliku „data.js”.
Tak wygląda zmienna, w której umieszczona jest tablica: voprosi = [,,,,,,,,,,,,,,];

Peremeshat_vse_voprosi(voprosi);

W pliku data.js dodaję nową zmienną, w której można określić, czy pytania mają być tasowane, czy nie ("tak" lub "nie").

var peremeshat_voprosi = "tak";

Przykładowe pytanie wyjściowe w pliku html:

Document.getElementById("v_1").innerHTML = voprosi;

Test z możliwością mieszania pytań można pobrać z linku poniżej.

Ponieważ pytania są mieszane, dodałem wynik nie tylko odpowiedzi ucznia, ale także tekst pytań do wyniku programu. Połączyłem to wszystko w jeden stół.

Pobierz szablon testowy z obrazami

Pobierz plik: (pliki do pobrania: 59)

Projekt wizualny programu testowego

Do testu dodano wszystkie główne funkcje. Przejdźmy teraz do projektowania programu testów szkoleniowych. Aby skrócić czas prac projektowych, korzystam z darmowej biblioteki bootstrap.

Dodano klasy biblioteczne i prawie wszystkie właściwości zostały zastąpione przy projektowaniu zarówno pytań testowych, jak i tabeli wyników.
Czyli sam test wygląda tak:

A tabela odpowiedzi wygląda tak:

Zauważ, że z pomocą biblioteki bootstrap dodałem również skalę, która wyświetla procent poprawnie wykonanych zadań testowych.

Więc, Ostatnia wersja(na ten moment) możesz pobrać już zaprojektowany wizualnie test z poniższego linku.


Pobierać pełna wersja szablon testowy

Pobierz plik: (pliki do pobrania: 246)

Możesz zakodować odpowiedzi do testu na naszej stronie internetowej.

HTML »

jest :

  1. Sieć-strony

  2. system programowania

  3. Edytor graficzny

    Kod programu

    Plik

    kręgle

3. Program do tworzenia Sieć HTML :

    MS Word

    Farba

    Kalkulator

    Zeszyt

    serwer

    Protokół

    HTML

    Przeglądarka

    W strona internetowa

    Multimedia

7. Hipertekst to:

  1. Bardzo duży tekst

Test na temat „Podstawy hipertekstowego języka znaczników HTML »

1. HTML (HIPER TEKST JĘZYK ZNACZNIKÓW) jest :

  1. Jeden ze sposobów tworzeniaSieć-strony

  2. system programowania

  3. Edytor graficzny

  4. system zarządzania bazą danych

2. Instrukcja dla przeglądarki wskazująca sposób wyświetlania tekstu:

    Kod programu

    Plik

    kręgle

3. Program do tworzenia Sieć -strony używające języka HTML :

    MS Word

    Farba

    Kalkulator

    Zeszyt

4. Strona internetowa (dokument HTML) to:

    Plik tekstowy z rozszerzeniem txt lub doc

    Plik tekstowy z rozszerzeniem htm lub html

    Binarny z rozszerzenie .com lub .exe

    Plik graficzny z rozszerzenie gif lub jpg

5. Program do przeglądania stron hipertekstowych nazywa się:

    serwer

    Protokół

    HTML

    Przeglądarka

6. Sposób organizacji informacji na serwerze WWW to:

    W strona internetowa

    Multimedia

7. Hipertekst to:

  1. Bardzo duży tekst

  2. Tekst o dużym rozmiarze czcionki

  3. Tekst strukturalny, w którym możliwa jest nawigacja na wybranych etykietach

  4. Tekst, w którym wstawiane są obiekty z dużą ilością informacji

8. Hiperłącza na stronie internetowej mogą prowadzić do...

  1. tylko w obrębie tej strony internetowej

  2. tylko do stron internetowych tego serwera

  3. do dowolnej strony internetowej z danego regionu

  4. do dowolnej strony WWW dowolnego serwera internetowego

9. Tag to:

HTML dokument?

  1. < ciało> ciało>

  1. < ciało> ciało>

  2. < p> p>

  3. < html> html>

  4. < tytuł> tytuł>

  1. < tytuł> tytuł>

  2. < ciało> ciało>

  3. < h1> h1>

  4. < obrazeksrc=” nazwać”>

  1. < p> p>

  2. < obrazeksrc=” nazwać”>

  3. < ciało> ciało>

  4. < h1> h1>

14. Jakie znaczniki tworzą hiperłącze do innych dokumentów?

  1. < obrazeksrc=” nazwać”>

15. Jakie znaczniki tworzą akapit w dokumencie?

16. Który tag dodaje obraz doHTML dokument?

9. Tag to:

  1. Instrukcja dla przeglądarki określająca sposób wyświetlania tekstu

  2. Tekst ze znakami specjalnymi

  3. Wskaźnik do innego pliku lub obiektu

  4. Fragment programu zawartego na stronie WWW

10. Które tagi informują przeglądarkę, co to jest?HTML dokument?

  1. < ciało> ciało>

11. Jakie tagi definiują widoczną część dokumentu?

  1. < ciało> ciało>

  2. < p> p>

  3. < html> html>

  4. < tytuł> tytuł>

12. Jakie tagi umieszczają tytuł dokumentu w spisie treści przeglądarki internetowej?

  1. < tytuł> tytuł>

  2. < ciało> ciało>

  3. < h1> h1>

  4. < obrazeksrc=” nazwać”>

13. Jakie tagi określają rozmiar tytułu?

  1. < p> p>

  2. < obrazeksrc=” nazwać”>

  3. < ciało> ciało>