Problème : Système de Badges (double !)

Bonjour ! C'est encore moi

Mon forum Two Birds Free a pas mal évolué depuis que j'ai pu m'y remettre et est en train de subir une refonte quasi-totale (et une complétion du contenu, surtout ._.) !

Ce faisant, j'aimerais pouvoir afficher, dans le profil, deux systèmes de succès (j'avais suivi le système de badges de Nihil, à l'époque) !

Cependant, lorsque j'en affiche un, le second saute D:
Je me demande si je devrais tout rassembler en une seule page HTML ou si c'est tout de même faisable en 2 pages séparées (pour les modifications, ce serait plus simple ) ?

>> Une image du problème :


>> Voilà le javascript (le même sur les deux, seules les variables et l'ID du champ du profil et de la page HTML changent, celui-ci concerne la partie "Mes exploits") :

Code:

/* on vérifie si on est bien sur la page de profil */
if (/^\/u\d+$/.test(document.location.pathname)) {
    var idPage = "4"; /* numéro de la page HTML */
    var idChamp = "field_id1"; /* ID du champ à modifier */


    $.get("/h" + idPage + "-", function (data) {
        /* on récupère le block des badges */
        var $badges = $(data).find(".badges-profil");

        /* on attend que notre page HTML soit prête */
        $(function () {
            /* on récupère la zone badge */
            var $profilBadges = $("#"+idChamp);

            if ($profilBadges.length > 0) {
                /* selection des badges du membre */
                var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");

                /* pour chaque badge, on ajoute la classe si besoin */
                for (var i = 0, l = badgesUser.length; i < l; i++) {
                    if (badgesUser[i].length > 0) {
                        $badges.find("." + badgesUser[i].trim()).addClass("badge-actif");
                    }
                }

                /* si la personne ne peut pas éditer le champ,
                * on le retire la zone */
                if ($profilBadges.find(".field_editable").length < 1) {
                    $profilBadges.next().andSelf().remove();
                }
            }

            /* on ajoute le block dans le profil */
            $(".badges-page-profil").append($badges);
        });

    })
}

Et la partie mutation :

Code:

/* on vérifie si on est bien sur la page de profil */
if (/^\/u\d+$/.test(document.location.pathname)) {
    var idPage = "7"; /* numéro de la page HTML */
    var idChamp = "field_id14"; /* ID du champ à modifier */


    $.get("/h" + idPage + "-", function (data) {
        /* on récupère le block des badges */
        var $mutations = $(data).find(".muta-profil");

        /* on attend que notre page HTML soit prête */
        $(function () {
            /* on récupère la zone badge */
            var $profilMutations = $("#"+idChamp);

            if ($profilMutations.length > 0) {
                /* selection des badges du membre */
                var mutationsUser = $profilMutations.find(".field_uneditable").text().split(";");

                /* pour chaque badge, on ajoute la classe si besoin */
                for (var i = 0, l = mutationsUser.length; i < l; i++) {
                    if (mutationsUser[i].length > 0) {
                        $mutations.find("." + mutationsUser[i].trim()).addClass("muta-active");
                    }
                }

                /* si la personne ne peut pas éditer le champ,
                * on le retire la zone */
                if ($profilMutations.find(".field_editable").length < 1) {
                    $profilMutations.next().andSelf().remove();
                }
            }

            /* on ajoute le block dans le profil */
            $(".muta-page-profil").append($mutations);
        });

    })
}

Mon template profile_view_body :

Code:

<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a></span></td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<div class="PFIL"><div class="lstPFIL"><!-- BEGIN switch_auth_user --><div class="adminPFIL">{ADMINISTRATE_USER}{BAN_USER} |&nbsp;{L_PRIVATE_MSG} : {PRIVATE_MSG}</div><!-- END switch_auth_user --><span>{L_LAST_VISITED} :</span> {LAST_VISIT_TIME}</div><div id="avPFIL"><div class="avPFIL"><span id="avatar_membre">{AVATAR_IMG}</span></div><a class="sbjPFIL" href="/sta/{PUSERNAME}">{L_TOPICS}</a><a class="msgPFIL" href="/spa/{PUSERNAME}">{L_POSTS}</a></div><div class="boxPFIL"><div class="namePFIL">{USERNAME}</div><div class="abtPFIL"><!-- BEGIN profile_field --><div id="field_id{profile_field.ID}"><div><span class="gen">{profile_field.LABEL}</span> {profile_field.CONTENT}</div></div><!-- END profile_field --></div></div><div id="ktactPFIL"><!-- BEGIN contact_field --><div class="ktactPFIL">{contact_field.CONTENT}</div><!-- END contact_field --></div>

<!-- BEGIN switch_rpg -->
<div class="boxRPG"><div style="float:left; margin:0 10px 10px 0;">{RPG_IMAGE}</div>
 <!-- BEGIN rpg_fields -->
 <span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span> {switch_rpg.rpg_fields.F_VALUE_NEW}<br/>
 <!-- END rpg_fields -->
 {U_ADMIN_RPG}
 </div>
 <!-- END switch_rpg -->
  <br>
      <div style="width:70%;text-align:center;padding:20px;margin:0 auto;">
    <div style="font-variant:small-caps;color:white;text-shadow:1px 1px 1px white;font-family:Yanone Kaffeesatz;font-size:50px;letter-spacing:3px;margin-bottom:-20px;">Mutations</div>
    <div style="background-color:rgba(255,255,255,0.5);width:100%;padding-top:10px;border-radius:20px 20px 0 0;">
      <div class="muta-page-profil"></div>
        </div></div>
    <div style="width:70%;text-align:center;padding:20px;margin:0 auto;">
      <div style="font-variant:small-caps;color:white;text-shadow:1px 1px 1px white;font-family:Yanone Kaffeesatz;font-size:50px;letter-spacing:3px;margin-bottom:-20px;">Mes Exploits</div>
    <div style="background-color:rgba(255,255,255,0.5);width:100%;padding-top:10px;border-radius:20px 20px 0 0;">
    <div class="badges-page-profil"></div>
      </div></div>

<!-- BEGIN switch_admin_user_comment_active --><span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span> {ADMIN_USER_COMMENT}<!-- END switch_admin_user_comment_active -->
</div>
</table>
<br />
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){
 $('[id^=field_id]').each(function(){
 if ( $(this).find('.field_editable').is('span, div') )
 {
 $(this).hover(function()
 {
 if( $(this).find('.field_editable.invisible').is('span, div') )
 {
 $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
 $(this).find('.ajax-profil_edit').attr({
 alt: "{L_FIELD_EDIT_VALUE}",
 title: "{L_FIELD_EDIT_VALUE}"
 }).click(function(){
 $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
 $(this).prev().find('.ajax-profil_valid').attr({
 alt: "{L_VALIDATE}",
 title: "{L_VALIDATE}"
 }).click(function(){
 var content = new Array();
 $(this).parent().find('[name]').each(function(){
 var type_special = $(this).is('input[type=radio],input[type=checkbox]');
 if ( (type_special && $(this).is(':checked')) || !type_special )
 {
 content.push(new Array($(this).attr('name'), $(this).attr('value')));
 }
 });
 var id_name = $(this).parents('[id^=field_id]').attr('id');
 var id = id_name.substring(8, id_name.length);
 $.post(
 "{U_AJAX_PROFILE}",
 {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
 function(data){
 $.each(data, function(i, item){
 $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
 });
 },
 "json"
 );
 });
 $(this).remove();
 });
 }
 },function()
 {
 if( $(this).find('.field_editable.invisible').is('span, div') )
 {
 $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
 $(this).find('.ajax-profil_edit').remove();
 }
 });
 }
 });
 });
//]]>
</script>

Et la partie CSS concernée :

Code:

/*BADGES - DEBUT*/
  .p-badge, .p-muta {
  position: relative;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  padding: 2px;
  border-radius: 8px;
  margin: 5px;
  filter: grayscale(100%);
}

.badge-actif, .muta-active{
  position: relative;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  padding: 2px;
  border-radius: 8px;
  margin: 5px;
  filter: none!important;
}

.p-badge-illu img, .p-muta-illu img{width:40px;height:40px;}


/* style de la boite de description */
.p-badge-description, .p-muta-desc {
  position: absolute;
  top: 50px;
  left: -30px;
  z-index: 1;
  text-align:left;
  color: white;
  padding: 5px 10px;
  width: 350px;
  border-radius: 10px;
 
  /* effet survol */
  transition: all 300ms;
  opacity: 0;
  visibility: hidden;
}

.succes_hrp{background-color:rgba(151,84,158,0.9);border:2px solid #703E75;}
.arrow-up_hrp{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #703E75;}
.succes_fiche{background-color:rgba(205,171,216,0.9);border:2px solid #B07BC1;}
.arrow-up_fiche{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #B07BC1;}
.succes_scenar{background-color:rgba(156,169,199,0.9);border:2px solid #6B7EAB;}
.arrow-up_scenar{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #6B7EAB;}
.succes_statlvl{background-color:rgba(89,163,22,0.9);border:2px solid #3E710F;}
.arrow-up_statlvl{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #3E710F;}
.succes_relation{background-color:rgba(111,210,183,0.9);border:2px solid #2F977A;}
.arrow-up_relation{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #2F977A;}
.succes_rencontre{background-color:rgba(111,210,183,0.9);border:2px solid #2F977A;}
.arrow-up_rencontre{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #2F977A;}
.succes_defi{background-color:rgba(40,114,138,0.9);border:2px solid #1B4A5A;}
.arrow-up_defi{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #1B4A5A;}
.succes_nc18{background-color:rgba(188,33,37,0.9);border:2px solid #7B1517;}
.arrow-up_nc18{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #7B1517;}
.succes_special{background-color:rgba(241,186,103,0.9);border:2px solid #EC930D;}
.arrow-up_special{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #EC930D;}
.succes_secret{background-image:url("https://nsa40.casimages.com/img/2019/09/01/190901090300650928.gif");height-max:400px;width-max:350px;background-color:rgba(192,192,192,0.9);border:2px solid #C0C0C0;}
.arrow-up_secret{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #C0C0C0;}

.muta_common{background-color:rgba(61,137,81,0.9);border:2px solid #3D8951;}
.arrow-up_common{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #3D8951;}
.muta_common.perm{background-color:rgba(146,247,134,0.9);border:2px solid #77F968;}
.arrow-up_common.perm{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #77F968;}
.muta_rare{background-color:rgba(111,149,178,0.9);border:2px solid #6f95b2;}
.arrow-up_rare{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #6f95b2;}
.muta_rare.perm{background-color:rgba(113,225,232,0.9);border:2px solid #ACF7F4;}
.arrow-up_rare.perm{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #ACF7F4;}
.muta_epic{background-color:rgba(168,123,176,0.9);border:2px solid #a87bb0;}
.arrow-up_epic{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #a87bb0;}
.muta_epic.perm{background-color:rgba(239,104,242,0.9);border:2px solid #F5A5F8;}
.arrow-up_epic.perm{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #F5A5F8;}
.muta_legend{background-color:rgba(189,157,28,0.9);border:2px solid #bd9d1c;}
.arrow-up_legend{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #bd9d1c;}
.muta_legend.perm{background-color:rgba(243,250,114,0.9);border:2px solid #FCFEA7;}
.arrow-up_legend.perm{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #FCFEA7;}
.muta_unique{background-color:rgba(206,213,217,0.9);border:2px solid #ced5d9;}
.arrow-up_unique{position:relative;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-12px;margin-bottom:4px;margin-left:35px;border-bottom:5px solid #ced5d9;}

.muta-section{padding:10px;text-align:left;color:white;font-family:'Chakra Petch',sans-serif;width:80%;font-size: 20px;font-variant: small-caps;font-weight:bold;letter-spacing:1px;position: relative;left: 15px;border-bottom:1px solid white;}
.badges_desc_title, .muta_desc_title{text-align:center;font-variant:small-caps;font-weight:bold;font-size:14px;text-decoration:overline;border-bottom:1px solid white;letter-spacing:1px;padding:2px 0px;}
.badges_desc_contenu, .muta_desc_contenu{text-align:justify;font-size:13px;font-style:italic;padding-top:2px;}
/* on fait apparaitre la description au survol */
.p-badge:hover .p-badge-description, .p-muta:hover .p-muta-desc {
  opacity: 1;
  visibility: visible;
}
.badges-page-profil .p-badge:hover, .muta-page-profil .p-muta:hover {
z-index: 1;
}

/* bloc qui contient tous les badges */
.badges-profil, .muta-profil {
  padding:10px;
  background-color:rgba(0,0,0,0.5);
  margin: 10px auto;
}

/* Par défaut on masque les badges dans le profil */
.badges-page-profil .p-badge, .muta-page-profil .p-muta {
  display: none;
}

/* on affiche seulement les badges actifs */
.badges-page-profil .p-badge.badge-actif, .muta-page-profil .p-muta.muta-active {
  display: inline-block;
}

/*BADGES - FIN*/

S'il manque quelques infos, n'hésitez pas à le dire !
Merci beaucoup !

Hello !

Décidément, beaucoup de gens utilisent ces badges mais je ne vois aucun tutoriel à l'horizon pour servir de référence ;_;

Alors je n'ai pas le niveau de Nihil en javascript mais j'arrive occasionnellement à le débugguer, du coup est ce que tu pourrais rendre accessible les profils sur ton forum que je jette un oeil avec la console ?

(Au pire, on ira la poker en espérant qu'elle soit disponible XD)

Salut Christa ! :)
La permission est à jour

Alors merci, mais ça serait mieux s'il y avait un profil avec ces champs remplis pour voir ce que ça donne :p

En tout cas à première vue les deux scripts font leur boulot de charger le contenu des pages HTML, donc je suppose que ça pèche au moment d'afficher les badges...

Je peux te passer celui-ci, qui est le profil de l'image : https://2birdsfree.forumactif.com/u4
Il y a des badges dans les deux champs concernés (et j'ai modif' le CSS pour que tous les badges soient affichés, pas seulement les actifs) ^^

En parlant de ça, j'ai remarqué dans la console que les badges sensés être actifs (le titre du badge dans le champ = badge actif) ne sont pas indiqués comme tels dans la partie "Mes Exploits", et donc ne s'affichent tout simplement pas (sauf si j'ajoute la class 'badge-actif' à la mano), le problème viendrait donc de là

Je réalise qu'en tant qu'invitée je ne peux peut-être pas voir ces champs :/ Ca n'aide pas pour voir ce qui ne marche pas XD J'imagine que ça serait mieux de tester sur un forum de test mais gnuuuu la mise en plaaaaace j'ai la fleeeeemmmeeee. #ServiableMaisPasTrop

Par contre je réalise en regardant le code source de ta page de profil que l'identifiant d'un champ est sous cette forme : field_id-8 mais que dans ton javascript tu as mis les identifiants sous cette forme : field_id14. C'est p'têt une piste à explorer ?

Aaaah, j'ai oublié de les passer en invité ! Je change ça de suite ;-;
[ EDIT ] - C'est bon

Pour les champs, je n'ai aucune idée du pourquoi certains ont un - et d'autres non, mais par instinct je dirai que le - concerne uniquement les champs "obligatoirement remplis"
En inspectant le fieldid en console, les succès ("Mes Exploits") ont le field_id1 et les mutations le field_id14 (je viens de revérifier xD)

Bon, de ce que je peux voir :
- On peut voir que les deux scripts qui affichent les badges fonctionnent, dans le sens où ils vont chercher la page HTML et en affiche le contenu.
- Le deuxième (celui des mutations) fonctionne, mais pas le premier. La question à se poser : quelles sont les différences entre les deux ? Les codes ont l'air similaires, donc c'est peut-être du côté du réglage desdits champs de profil que le problème se pose ?
- Il n'y a pas d'erreur dans la console, donc pas de crash à première vue, le script suit son cours mais ne trouve apparemment pas ce qu'il cherche.

Ma technique dans ce cas là (pour rappel, je ne suis pas spécialement une flèche en JS XD) c'est de mettre des console.log() partout et de voir ce que la console me raconte. Du coup on va faire ça pour le script des succès :

Code:

/* on vérifie si on est bien sur la page de profil */
if (/^\/u\d+$/.test(document.location.pathname)) {
    var idPage = "4"; /* numéro de la page HTML */
    var idChamp = "field_id1"; /* ID du champ à modifier */


    $.get("/h" + idPage + "-", function (data) {
        /* on récupère le block des badges */
        var $badges = $(data).find(".badges-profil");

        /* on attend que notre page HTML soit prête */
        $(function () {
            /* on récupère la zone badge */
            var $profilBadges = $("#"+idChamp);
            console.log("Variable $profilBadges : " + $profilBadges);

            if ($profilBadges.length > 0) {
                /* selection des badges du membre */
                var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");
                console.log("Variable badgesUser : " + badgesUser);

                /* pour chaque badge, on ajoute la classe si besoin */
                for (var i = 0, l = badgesUser.length; i < l; i++) {
                    console.log("badgesUser[" + i + "] = " + badgesUser[i]);
                    if (badgesUser[i].length > 0) {
                        console.log("Est-ce qu'il est dans la liste ? " + $badges.find("." + badgesUser[i].trim()));
                        $badges.find("." + badgesUser[i].trim()).addClass("badge-actif");
                    }
                }

                /* si la personne ne peut pas éditer le champ,
                * on le retire la zone */
                if ($profilBadges.find(".field_editable").length < 1) {
                    $profilBadges.next().andSelf().remove();
                }
            }

            /* on ajoute le block dans le profil */
            $(".badges-page-profil").append($badges);
        });

    })
}

J'ai joué avec la console et fait toutes les commandes du script et il trouve bien les champs & co, donc je ne sais pas où ça cloche. Vu que le contenu de chaque page apparait, c'est que le script fonctionne, mais pourquoi il arrive à manipuler l'un des contenus et pas l'autre, telle est la question. Bref, remplace le script et allons voir ce que la console baragouine \o/

C'est changé

[EDIT] Alors, il semble que même avec le script JS des succès, il prend les mutations...

Code:

Variable $profilBadges : [object Object] 99545.js:1:2750
Variable badgesUser : griffes_courtes,petites_ecailles,crochets, 99545.js:1:2905
badgesUser[0] = griffes_courtes 99545.js:1:2995
Est-ce qu'il est dans la liste ? [object Object] 99545.js:1:3072
badgesUser[1] = petites_ecailles 99545.js:1:2995
Est-ce qu'il est dans la liste ? [object Object] 99545.js:1:3072
badgesUser[2] = crochets 99545.js:1:2995
Est-ce qu'il est dans la liste ? [object Object] 99545.js:1:3072
badgesUser[3] =

On sent que je maitrise l'art de manipuler la console, je pensais qu'elle afficherait le contenu de l'objet au lieu de me faire Object object XD. Ca m'apprendra à vouloir faire ma maline. Je t'avoue que je ne sais pas. La console n'affiche que le contenu de la première instruction console.log() que j'ai rajoutée, du coup je suppose qu'elle n'entre pas dans les conditions suivantes, mais je ne comprends pas pourquoi, j'en déduis donc qu'on atteint les limites de mes compétences et qu'il y a probablement une solution simple que je ne vois pas :/

AH! JE CROIS! QUE J'AI! UNE IDEE!

Les noms des variables sont les mêmes d'un script à l'autre, et compte tenu de leur ordre d'exécution ça doit poser problème. Du coup et si tu remplaçais, pour chaque script, les var idPage et var idChamp par let idPage et let idChamp ? C'est une question de portée des variables, c'est p'têt ça le souci.

(J'ai réalisé que la variable idChamp contenait field_id14 au lieu de field_id1 pendant l'exécution du script et c'est probablement là que ça coince XD)

Mais pourquoi j'y ai pas pensé ?
Ça fonctionne !

Je passe en résolu

Pourquoi j'y ai pas pensé non plus, on m'en a parlé ya pas longtemps en plus T_T En tout cas du coup je suis trop fière de moi MWHAHAHAHAHAHA /o/ Bon courage pour la suite ! :)

Merciiii