Web teknolojileri bilgisi üzerine testler

Bu makale, bir eğitim testinin sıralı oluşturulmasını açıklar. Programlama hakkında okumak istemiyorsanız, doğrudan testi nasıl değiştireceğiniz ve indireceğinizle ilgili talimatları içeren bölüme gidin.

Basit bir test oluşturma

Bilgi teknolojilerinin ve uzaktan eğitimin gelişmesi, elektronik eğitim testleri oluşturma ihtiyacını doğurmaktadır. Birçok öğretmen ve eğitimci, müfredat testleri oluşturma zorluğuyla karşı karşıyadır. Bu sorunu çözmedeki temel zorluk, bu tür elektronik materyallerin oluşturulmasının HTML ve javascript bilgisi gerektirmesidir.

Bu sorun nasıl çözülür? Öğretmen, çevrimiçi test oluşturucuyu kullanabilir veya bir şablonun kullanımına dayalı olarak kendi başına bir test oluşturmaya çalışabilir. Bu makalede ele alacağımız ikinci seçenektir.

Daha sonra birkaç dosyaya bölünebilecek ve her biri ayrı bir teste dönüşebilecek basit bir şablon oluşturacağız.

Diyelim ki birkaç matematik probleminden oluşan basit bir matematik testiniz var:

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

Örnekler ekranda gösterilmeli ve öğrenciye cevabı girme fırsatı verilmeli, ardından cevabı doğru cevapla karşılaştırmalı ve öğrenciye doğru tamamlanan görevlerin yüzdesini göstermelidir.

İlk olarak, görevler için HTML kodunu oluşturalım:

4*12 + 7 =

7-8*2 =

34*2 + 17 =

Doğrulamak

Deneme testinin her görevinin önüne bir metin giriş alanı koyduk. Buradaki makaledeki HTML'deki farklı alanlar hakkında daha fazla bilgi edinin. Sonunda, tıklandığında öğrencinin metin yanıtlarına ne yazdığını kontrol etmesi gereken bir düğme ekledik.

“z_1”, “z_2” ve “z_3” tanımlayıcılarına dikkat edin. Görev 4'ü eklemeniz gerekiyorsa, görevin bulunduğu son satırı kopyalamanız, koşulu değiştirmeniz ve tanımlayıcı alanına "z_4" yazmanız yeterlidir.

Son satırda ise görevlerin sonucunu kontrol ettikten sonra göstereceğiz.

Bir sonraki aşamada, öğrencinin yazdıklarını doğru cevaplarla karşılaştıracak ve tamamlanan görevlerin yüzdesini hesaplayacak bir javascript kodu oluşturmanız gerekiyor.

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

İlk üç satır doğru cevapları içerecektir. Dördüncü ve sonraki problemler, cevabın bulunduğu son satır kopyalanarak, 3 yerine 4 rakamı konularak ve doğru cevap belirtilerek teste eklenir.

Şimdi öğrencinin cevaplara ne girdiğini bulmanız gerekiyor. Bunun için aşağıdaki kodu kullanıyoruz.

otv_uch_1 = document.getElementById ('z_1').değer;
otv_uch_2 = document.getElementById ('z_2').değer;
otv_uch_3 = document.getElementById ('z_3').değer;

Dördüncü görev, sayıların 3'e 4 değiştirilmesiyle yeni bir satır anlamına gelecektir.

top = 0;
top + = 1;
}
top + = 1;
}
top + = 1;
}

Görev 4'ü eklemek için son üç satırı kopyalamanız ve içindeki sayıları 4 ile değiştirmeniz gerekir.

vsego_zadach = 3

Bu satırda örnek testte kaç tane problem olduğunu belirtiyoruz. Daha fazlasını eklediyseniz, bu rakamı düzeltmeniz gerekir.

Ardından cevabı ekranda görüntülemeniz gerekir.

document.getElementById ('rezultat'). innerHTML = "İşler doğru şekilde tamamlandı" + procent_vip + "%.";

Bu kadar. Şimdi tüm kodu tek bir HTML sayfasında birleştirelim.

Test görevlerini tamamlayın:

4*12 + 7 =

7-8*2 =

34*2 + 17 =

Doğrulamak

HTML cevaplarıyla öğretici testinin tüm kodu bu. Bu dosyayı aşağıdan indirebilirsiniz. Görev sayısını artırmak veya azaltmak için bu kılavuzu kullanın.

Test şablonunu indirin. Basit seçenek

Dosyayı indirin: (İndirilenler: 593)

Aşağıda, testin genişletilmiş bir sürümünü indirebilirsiniz.

Test sorularının ayrılması. Sonraki Soru düğmesi ekleme

Bir seferde yalnızca bir sorunun görüntülendiğinden emin olmamız gerekir. Ve bir sonraki soruya geçmek için "Sonraki soru" düğmesine basmanız gerekiyordu.

Bunu yapmak için, her soru ve cevap kutusunu ayrı div'lere ekleyeceğiz. Ve ikinci ve üçüncü sorular için, onları gizlemek için "display: none" parametresini ekleyin. İlk olarak "display:block" parametresini belirtiyoruz. Ve her blok için soruların numaralarını imzalayacağız.

Ayrıca Sonraki Soru butonunun kodunu da ekleyeceğiz.

Sonraki soru

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

İlk durumda, ikinci sorunun görüntülenip görüntülenmediğini kontrol ediyoruz, eğer öyleyse, onu gizlememiz ve üçüncü soruyu göstermemiz gerekiyor ve ayrıca test soruları arasında geçiş yapmak için düğmeyi gizlememiz ve "Kontrol Et" düğmesini göstermemiz gerekiyor. bu soru son soru. İkinci durumda, testin ilk sorusunun görüntülenip görüntülenmediğini kontrol ederiz. Eğer öyleyse, onu gizlemeniz ve ikinci soruyu göstermeniz gerekir.

Sonuç olarak, testimiz şöyle görünür:

Ancak bu durumda teste yeni sorular eklemek daha zor olacaktır.

Test sorularını ve yanıtlarını ayrı bir JavaScript dosyasına taşıma

Soruları değiştirmeyi kolaylaştırmak için soruları ve cevapları ayrı bir dosyaya aktarmanız gerekir. O zaman bu verileri ana dosyada aramanız gerekmez. Bir programcı değilseniz, bu arama zor olacaktır. Böylece yeni bir data.js dosyası oluşturuyoruz ve bunu testimizin ana html dosyasına bağlıyoruz. Daha sonra, ona sorularla birlikte birkaç değişken ve cevaplarla birlikte birkaç değişken ekliyoruz (cevapları ana dosyadan aktarıyoruz).

Vopros_1 = "4 * 12 + 7 ="; vopros_2 = "7-8 * 2 ="; vopros_3 = "34 * 2 + 17 ="; pr_otv_zadachi_1 = 55; pr_otv_zadachi_2 = -9; pr_otv_zadachi_3 = 85;

Ve sayfayı yükledikten sonra değişkenlerden soruların metinlerini ayarlamak için javascript kodunu yazıyoruz.

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

Bu kadar. Şimdi, test sorularının ve cevaplarının metnini değiştirmek için data.js dosyasını düzenlemeniz yeterlidir. Testin adını da aynı şekilde ekleyelim:

Var testi = "Çarpma";

Test yanıtlarını şifreleme

Aldığımız müfredat testinde bir dezavantaj var. Öğrenci "data.js" dosyasını açarsa sadece soruların metinlerini değil cevaplarını da görecektir. Bu nedenle, öğrencinin onları tanımaması için cevapları şifrelememiz gerekiyor.

Bunun için kodirov fonksiyonunu kullanıyoruz. Şuna benziyor:

fonksiyon kodirov (stroka) (var b64ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg" + "hijklmnopqrstuvwxyz0123456789 + / ="; var b64enc = ""; var ch1, ch2, ch3; en var i3, i4; için > 2; tr2 = ((ch1 & 3)<< 4) | (ch2 >> << 2) | (ch3 >>

Benzer şekilde, ikinci ve üçüncü soruları şifreliyoruz. Şifrelemeden sonra data.js dosyasının içeriği şöyle görünür:

Var vopros_1 = "4 * 12 + 7 ="; var vopros_2 = "7-8 * 2 ="; var vopros_3 = "34 * 2 + 17 ="; var pr_otv_zadachi_1 = "NTU ="; var pr_otv_zadachi_2 = "LTk ="; var pr_otv_zadachi_3 = "ODU =";

Gördüğünüz gibi, yanıtlar şifrelenir ve bir dizi karakteri temsil eder.

Ana dosyada, kontrol etmeden önce öğrencinin yazdıklarını şifrelemeniz gerekir.

Otv_uch_1 = document.getElementById ("z_1"). Değer; otv_uch_1 = kodirov (otv_uch_1); otv_uch_2 = document.getElementById ("z_2").değer; otv_uch_2 = kodirov (otv_uch_2); otv_uch_3 = document.getElementById ("z_3").değer; otv_uch_3 = kodirov (otv_uch_3);

Sonuç olarak, program şifreli cevapları kontrol eder ve öğrenci eğitim testindeki soruların cevaplarını bulamaz.

Her sorunun cevabının sonucunu görüntüleme

Alıştırma testimiz toplam puanı yüzde olarak gösterir. Sonuçların her soru için ayrı ayrı görüntülenmesini sağlayacağız. Böylece öğrencinin test performansının daha detaylı bir analizini yapmak mümkün olacaktır.

Bunu yapmak için, öğrenci cevaplarını kontrol etme işlevini değiştirmeniz gerekir.

fonksiyon kanıtı () (otv_uch_1 = document.getElementById ("z_1"). Değer; otv_ucgenika_1 = otv_uch_1; otv_uch_1 = koddirov (otv_uch_1); otv_uch_2 = document.getdotElement zugen2 otv_uch_2; otv_uch_3 = document.getElementBy ; otv_ucgenika_3 = otv_uch_3; otv_uch_3 = kodirov (otv_uch_3; ball = 0; if (otv_uch_1 pr.) Doğru cevapladınız. Cevabınız: "+ otv_ucgenika_1;) else (otveti =" Soru 1. Yanlış cevapladınız. Cevabınız: " + otv_ucgenika_1;) if (otv_uch_2 == pr_otv_zadachi_2) (top + = 1; otveti + ="
Soru 2. Doğru cevapladınız. Cevabınız: "+ otv_ucgenika_2;) else (otveti + ="
Soru 2. Yanlış cevapladınız. Cevabınız: "+ otv_ucgenika_2;) if (otv_uch_3 == pr_otv_zadachi_3) (top + = 1; otveti + ="
Soru 3. Doğru cevapladınız. Cevabınız: "+ otv_ucgenika_3;) else (otveti + ="
Soru 3. Yanlış cevapladınız. Cevabınız: "+ otv_ucgenika_3;) vsego_zadach = 3; procent_vip = ball / vsego_zadach * 100; document.getElementById (" rezultat "). InnerHTML =" İşler "+ procent_vip +"% oranında doğru şekilde tamamlandı.

"+ otveti;)

Bu fonksiyonun modifikasyonu sonucunda öğrencinin doğru cevap verip vermediği ve ayrıca verdiği cevap ekranda görüntülenir. Öğretmen, öğrencinin cevabını doğru olanla karşılaştırabilir ve eğitim çalışmalarını analiz edebilir.

Böylece eğitim faaliyetlerimizde kullanılabilecek tam teşekküllü bir eğitim sınavı aldık. Kolaylık olması için data.js dosyasını ayrı bir klasöre taşıdım. data.js dosyasını Not Defteri gibi herhangi bir metin düzenleyicide düzenleyebilirsiniz.

Son değişikliklerden sonra, yazı tiplerini artırarak, cevaplara renk katarak, html dosyasının aşağıdaki tam kaynak kodunu alıyoruz:

Üçüncü görevde bir hata ile test yürütmenin sonucu aşağıdaki şekilde gösterilmektedir. Ayrıca "toFixed ()" yuvarlama işlevini de ekledim.

Aşağıdan bu programı indirebilirsiniz.

Test şablonunu indirin

Dosyayı indirin: (İndirilenler: 93)
Dosyayı indirin: (İndirilenler: 102)
Dosyayı indirin: (İndirilenler: 120)

Testin cevaplarını web sitemizde kodlayabilirsiniz.

Test sorularına resim ekleme

Doğal olarak birçok soru için test oluştururken görsel eklemeniz gerekiyor. Soru metni yerine genellikle bir resim eklemek gerekir. Bu özelliği data.js dosyası üzerinden de uyguluyoruz. 15 soruluk en büyük testi düzenleyeceğim. Bu nedenle, her soru için ayrı bir değişken ekleyeceğim ve içinde belirteceğim: eğer bir resim varsa, o zaman - "evet", aksi takdirde - "hayır".

Var vopros_ris_1 = "evet"; var vopros_ris_2 = "hayır"; var vopros_ris_3 = "hayır"; var vopros_ris_4 = "evet"; var vopros_ris_5 = "hayır"; var vopros_ris_6 = "hayır"; var vopros_ris_7 = "evet"; var vopros_ris_8 = "hayır"; var vopros_ris_9 = "hayır"; var vopros_ris_10 = "hayır"; var vopros_ris_11 = "hayır"; var vopros_ris_12 = "hayır"; var vopros_ris_13 = "hayır"; var vopros_ris_14 = "hayır"; var vopros_ris_15 = "evet";

Dikkatinizi çekiyorum, sorunun metni varsa, resim varsa tamamen kaldırdım.

Var vopros_1 = ""; var vopros_2 = "7-8 * 2 ="; var vopros_3 = "34 * 2 + 17 ="; var vopros_4 = ""; var vopros_5 = "36 * 2 + 4 ="; var vopros_6 = "37 * 8 + 7 ="; var vopros_7 = ""; var vopros_8 = "39 * 12 + 19 ="; var vopros_9 = "40 * 2 + 16 ="; var vopros_10 = "41 * 4 + 3 ="; var vopros_11 = "42 * 8 - 7 ="; var vopros_12 = "43 * 6 - 5 ="; var vopros_13 = "4 * 62 - 6 ="; var vopros_14 = "45 * 9 - 9 ="; var vopros_15 = "";

Ancak hem bir resim hem de bir soru metni ekleyebilirsiniz.

Bu durumda 1,4,7 ve 15 numaralı sorularda görsel olacağını belirtmiştim. Bu yüzden bu görüntüleri "data" klasörüne eklemem gerekiyor. İsimleri (anlamlı olarak dahil olmak üzere) soru numaralarına karşılık gelmelidir: "01.jpg", "04.jpg", "07.jpg" ve "15.jpg".

Ana dosyanın program koduna değişkenleri kontrol eden koşullar ekledim. Bir resim varsa, test sorusuna bir resim yüklenir. İlk soru için böyle bir kod örneği: if (vopros_ris_1 == "yes") (vopros_1 = "

"+ vopros_1; document.getElementById (" v_1 "). innerHTML = vopros_1;) başka (document.getElementById (" v_1 "). innerHTML = vopros_1;)

Dosyayı indirin: (İndirilenler: 57)

Test sorularını rastgele sırayla karıştırın

Sınıfta yanımda oturan birkaç öğrenci tarafından aynı anda test yapıldığında, bazıları yanımda oturan diğerlerinin cevaplamak için ne dediğine bakarken bir sorunla karşılaştım. Sorulardaki karışıklığın birinci nedeni budur. İkincisi, aynı testin çok sayıda varyantını oluşturmaktır.

Bu manipülasyonlar programı biraz karmaşıklaştırıyor. Bu, bir dizi oluşturmayı, içine tüm soruları, görüntüleri ve cevapları koymayı ve ardından her şeyi rastgele sırayla karıştırmayı gerektirecektir.

Aynı zamanda "data.js" dosyasını düzenlemedim.
Diziyi içeren değişken şöyle görünür: voprosi = [,,,,,,,,,,,,,];

Peremeshat_vse_voprosi (voprosi);

data.js dosyasına, soruları karıştırıp karıştırmamayı ("evet" veya "hayır") belirleyebileceğim yeni bir değişken ekliyorum.

Var peremeshat_voprosi = "evet";

Bir html dosyasında bir soru çıktısı alma örneği:

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

Soruları karıştırma özelliği olan testi aşağıdaki linkten indirebilirsiniz.

Sorular karışık olduğu için program çalışmasının sonucuna sadece öğrencinin cevaplarının çıktısını değil, soruların metinlerini de ekledim. Bunların hepsini tek bir tabloda birleştirdim.

Resimlerle test şablonunu indirin

Dosyayı indirin: (İndirilenler: 59)

Test programının görsel tasarımı

Tüm temel fonksiyonlar teste eklendi. Şimdi eğitsel test programının tasarımına geçelim. Stil süresini kısaltmak için ücretsiz önyükleme kitaplığını kullanıyorum.

Hem test sorularının hem de sonuç çıktı tablosunun tasarımı için kitaplık sınıfları eklendi ve neredeyse tüm özellikler değiştirildi.
Yani, testin kendisi şöyle görünür:

Ve cevap tablosu şöyle görünür:

Doğru şekilde tamamlanmış test görevlerinin yüzdesini göstermek için önyükleme kitaplığını kullanarak bir ölçek de eklediğimi unutmayın.

Yani görsel olarak tasarlanmış testin en son sürümünü (şu anda) aşağıdaki bağlantıdan indirebilirsiniz.

Test şablonunun tam sürümünü indirin

Dosyayı indirin: (İndirilenler: 246)

Testin cevaplarını web sitemizde kodlayabilirsiniz.

Aradık, belirttiğiniz dosyayı aradık ama bulamadık. Bu iki durumdan birinde olabilir:

1. Yanlış bir şey yaptın.
2. Yanlış bir şey yaptık.

Bir dahaki sefere benzer bir duruma düşmemek için lütfen 404 hata sayfasının nasıl ve neden göründüğü hakkında kısa bir konuşmayı dinleyin.

404 hata sayfası nasıl ve neden görünür?

Elbette, sık sık neden bir sayfa adresi yazarken veya belirli bir bağlantıya tıklandığında, beklenenden tamamen farklı bir şeyin ortaya çıktığını, ancak kesinlikle ihtiyacımız olmayan bilgileri içeren gizemli ve anlaşılmaz bir sayfanın ortaya çıktığını merak ettiniz. Sadece hayal kırıklığına uğramakla kalmıyoruz, çünkü istediklerimiz yerine bize bir "kukla" veriyorlar, aynı zamanda bu sayfa genellikle afişlerle kaplı, sanki sadece herkes ziyaret ediyormuş gibi.

Dolayısıyla aşağıdaki durumlar sonucunda 404 hata sayfası oluşur. Ve bu metni okuduğunuza göre, onlardan birindesiniz demektir.

1. Sayfa adresi hatalı yazılmış

Peki, yanlış, kim olmaz. Dikkatlice bakın ve adresi tekrar yazın. Her şeyi doğru yazdığınızdan eminseniz bir sonraki noktaya geçin.

2. Sayfa, site yöneticisi tarafından taşındı veya silindi

Bir sayfa vardı, ama uçup gitti. Belki kaldırdılar, belki yeniden adlandırdılar, belki taşıdılar ya da belki ... Evet, her şey olabilir. Çünkü yönetici sitede istediğini yapabilir. Bu yüzden o bir yönetici! Bu durumda, sadece onu karanlık bir köşede yakalamak ve kibarca söylemek için kalır: “Nasıl yani! Yapılacaklar sayfası nerede, son kez soruyorum, sayfa sizinki de böyle olduğuna göre nereye gidiyorsunuz? Yerine koy!" Bundan sonra aklı başında her insan, vehiminin derinliğini ve tamamen acizliğini anlayarak eski sayfanın adresinden yenisinin adresine yönlendirme yapar. Ve mutluyuz, normal adresi yeniden yazabiliriz, artık doğru olup olmadığı konusunda endişelenmeden.

3. Geliştirici bağlantı adresini yanlış belirledi

Tarih bir kez daha karanlık bir açıyla tekerrür ediyor. Ancak bu sefer siteyi oluşturan ve linkler veren geliştiriciyi yakalıyoruz. Ve yine kibar bir tonla, vücudunun yumuşak kısımlarının yakınında soğuk, keskin bir cisimle oynayarak her şeyi doğru yapmanızı rica ediyoruz. Böyle masum bir istekten sonra direnmek imkansızdır.

Okuduktan sonra, belki de sadece bu sitenin yazarının hatası nedeniyle bu sayfada olduğunuzu düşündünüz. Öyle olmadığına sizi temin etmeye cüret ediyorum. İlk paragrafı okuyun, her şey orada yazıyor.

Cevapları olan hızlı ve kolay bir HTML testi yapmaya karar verdiniz, ancak benzer bir test için nereye gideceğinizi bilmiyor musunuz? Web geliştirmenin temellerini öğrenmek isteyen herkes için özel olarak oluşturulmuş modern WebShake portalı, bu soruna etkili bir çözümle yardımcı olacaktır. Sizin için hızlı, basit ve tamamen ücretsiz olarak bilginizi kontrol edebileceğiniz kullanışlı bir form hazırladık.

HTML Testi Ayrıntıları

Bu Köprü Metni İşaretleme Dili genel olarak kabul edilir. Farklı yapılara sahip web sayfalarının kolayca oluşturulması için idealdir. Aslında, bu dilde akıcılık, geliştiricinin şunları yapmasına olanak tanır:

• internet portalları oluşturmak;
• web sitelerinin yapısını belirlemek;
• her türlü unsuru geliştirmek vb.

Başka bir deyişle, HTML bilen uzmanlar, İnternet'in aktif gelişimi çağında büyük talep görmektedir. Ancak, kendi web sayfalarını geliştirmeye başlamadan önce, programcının dilin sözdizimine hakim olması ve onun hakkında temel bilgilere sahip olması gerekir. Çevrimiçi HTML testinin kullanışlı olduğu yer burasıdır.

Kendi bilgi seviyenizi belirlemek için ara toplamı düzenli olarak kontrol etmek son derece önemlidir. Bu aynı zamanda kod yazımındaki her türlü hatayı zamanında düzeltmenizi sağlar. Bu nedenle, yeni başlayanlar için en az 2-3 haftada bir HTML'nin temelleri üzerinde bir test yapmaları önerilir.

Dikkatinize sunmaktan mutluluk duyduğumuz sistem, hızlı ve kolay öğrenme için özel olarak tasarlanmıştır. HTML dil testi çeşitli sorular sunar, ancak geçtikten sonra size tüm doğru cevaplar verilecektir. Bu, dikkatlice öğrenilmesi ve güçlendirilmesi gereken konuların belirlenmesine yardımcı olacaktır.

Bu testler çok kullanışlıdır ve HTML dilinin sözdiziminde tam anlamıyla ustalaşmanıza olanak tanır. Bu, programcının tüm değişkenleri hesaba katarak yetkin bir şekilde kod oluşturmanın temellerini öğrenmesine yardımcı olacaktır. Herhangi bir zorluk yaşarsanız, tüm sorularınızı tavsiye etmekten ve cevaplamaktan memnuniyet duyarız. Bütün bunlar HTML dilini hızlı bir şekilde öğrenmenize yardımcı olacaktır.